var ID=$(".game-lg-2:last").attr("id");var oldID=0;var loadContent=false;var loadedID=[];$(document).ready(function(){function loadlovephoto(){if(loadContent==true){ID=$(".game-lg-2:last").attr("id");REFER=$(".referid:last").attr("id");$('div#lastlove_loader').html('<img src="/files/loading.gif">');var pathname=window.location.pathname;if(pathname=="/jquery"){$.post("jquery/morethread123?action=get&lastlove_id="+ID,function(data){if(data!=""){$(".game-lg-2:last").after(data);loadContent=false;}
$('div#lastlove_loader').empty();});}else{$.post("/touch/w2et/moregames.php?action=get&lastlove_id="+ ID,function(data){if(data!=""){$(".game-lg-2:last").after(data);loadContent=false;}
$('div#lastlove_loader').empty();});}oldID=$(".game-lg-2:last").attr("id");}};if(loadContent==false){$(window).scroll(function(){ID=$(".game-lg-2:last").attr("id");if(($(window).scrollLeft()>=$(document).width()-$(window).width()-300)&&ID!=oldID){if(ID>1){loadContent=true;loadlovephoto();}}});}});html,body{
overflow-x:hidden;
}
.row-horizon {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.row-horizon > [class*="col-lg"], .row-horizon > [class*="col-md"], .row-horizon > [class*="col-sm"], .row-horizon > [class*="col-xs"],.row-horizon > [class*="game-lg"], .row-horizon > [class*="game-md"], .row-horizon > [class*="game-sm"], .row-horizon > [class*="game-xs"] {
float: none;
display: inline-block;
white-space: normal;
vertical-align: top;
}
@media (min-width: 1200px)
.row-horizon > .col-lg-2 {
width: 15%;
}
}
@media (min-width: 992px) {
.row-horizon > .game-md-12 {
width: 90%;
}
.row-horizon > .game-md-1 {
width: 7.5%;
}
}
@media (min-width: 1200px) {
.row-horizon > .game-lg-2 {
width: 15%;
}
.row-horizon > .game-lg-1 {
width: 7.5%;
}
}
#style-11::-webkit-scrollbar
{
overflow:hidden;height:0px;
}
#style-11:hover::-webkit-scrollbar
{
overflow-y:scroll;height:4px;background-color:#F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 12
*/
.sliding {
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
margin-left:2%;
}
.btn-circle.btn-xxl {
width: 130px;
height: 130px;
padding: 45px 3px;
font-size: 22px;
line-height: 1.33;
border-radius: 65px;
}
.post a.title {
font-size: 12px;
line-height: 1.1;
color: #215399;
font-weight: normal;
text-decoration: none;
display: block;
text-transform: capitalize;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name=viewport content="width=device-width, initial-scale=1">
<title>Way2enjoy -Innovate it</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://way2enjoy.com/touch/w2et/js/jquery.mousewheel.js'></script>
<script type='text/javascript' src='http://way2enjoy.com/touch/w2et/js/moregames.js'></script>
</head>
<body>
<script>
$(function() {
$("#main-content > .row").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
<div class="container testimonial-group" id="main-content">
<div class="row row-horizon" id="style-13">
<h5> Facebook Games/Quiz</h5>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="99"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/99"><img src="http://way2enjoy.com/thumb/facebook-fun/your-profile-picture.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/99">let us guess your age based on your profile picture?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/99'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="100"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/100"><img src="http://way2enjoy.com/thumb/facebook-fun/want-to-kiss-you.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/100">how many people want to kiss you?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/100'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="101"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/101"><img src="http://way2enjoy.com/thumb/facebook-fun/liked-photo-on-facebook.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/101">which is your most liked photo on facebook?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/101'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="102"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/102"><img src="http://way2enjoy.com/thumb/facebook-fun/want-a-baby.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/102">how many people want to have a baby with you?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/102'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="103"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/2/103"><img src="http://way2enjoy.com/thumb/facebook-fun/who-loves-you-lot.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/2/103">who loves you but nobody knows?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/2/103'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="104"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/104"><img src="http://way2enjoy.com/thumb/facebook-fun/hurts-you.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/104">what hurts you the most?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/104'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="105"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/105"><img src="http://way2enjoy.com/thumb/facebook-fun/remember-about-you.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/105">what will people remember about you?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/105'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div>
<div class="game-lg-2 game-md-3 game-sm-4 game-xs-6 game-xsx-12" id="106"><div class="post">
<div class="img img-wrap"><a href="/pdf/4/fbb/process.php/1/106"><img src="http://way2enjoy.com/thumb/facebook-fun/were-born.jpg"></a></div><div class="txt"><a class="title" href="/pdf/4/fbb/process.php/1/106">what did god say when you were born?</a><p class="desc"></p></div>
<div class="clearfix"></div></div><div class="fb_share" onclick="location.href='/pdf/4/fbb/process.php/1/106'" style="display: inline-block; margin: 0"><i class="fb_f"></i><span>View Your Results</span></div><br></div> <div class="loadmore" id="lastlove_loader"></div>
</div>
<hr>
<div class="row row-horizon" id="style-11">
<h5 > Fun</h5>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/gifs" class="btn btn-primary btn-circle btn-xxl">GIFs</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/jokes" class="btn btn-success btn-circle btn-xxl">Jokes</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/wishes" class="btn btn-default btn-circle btn-xxl">Wishes</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/share" class="btn btn-danger btn-circle btn-xxl">Text 2 Pic</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/birthday" class="btn btn-info btn-circle btn-xxl">Birthday</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/a" class="btn btn-warning btn-circle btn-xxl">Celebrity</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/touch/w2et/photos-desigirls.php" class="btn btn-info btn-circle btn-xxl">Girls</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/hollywood-celebrity" class="btn btn-default btn-circle btn-xxl">Hollywood</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/good-night" class="btn btn-danger btn-circle btn-xxl">Good<br/>Night</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/good-morning" class="btn btn-warning btn-circle btn-xxl">Good<br/>Morning</a>
</div>
</div>
<hr>
<div class="row row-horizon" id="style-11">
<h5 > PDF/Image/MP3 Online Tools</h5>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/word-to-pdf-online-free-without-email" class="btn btn-danger btn-circle btn-xxl">PDF Tools</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/compress-png" class="btn btn-primary btn-circle btn-xxl">PNG/JPG<br/>Compress</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/resize-image" class="btn btn-info btn-circle btn-xxl">Resize<br/>Image</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/mp3-cutter" class="btn btn-primary btn-circle btn-xxl">MP3 Tools</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/word-to-pdf-online-free-without-email" class="btn btn-success btn-circle btn-xxl">Word to PDF</a>
</div>
</div>
<hr>
<div class="row row-horizon" id="style-11">
<h5 > Health</h5>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/diet-chart-loose-gain-weight" class="btn btn-primary btn-circle btn-xxl">Diet Plan<br />Maker</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/benefits" class="btn btn-info btn-circle btn-xxl">Fruit<br />Benefits</a>
</div>
</div>
<hr>
<div class="row row-horizon" id="style-11">
<h5 > Mobile</h5>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/mobile-under-10000" class="btn btn-primary btn-circle btn-xxl">Mobile below<br />10000</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/mobile-under-15000" class="btn btn-info btn-circle btn-xxl">Mobile below<br />15000</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/mobile-under-5000" class="btn btn-success btn-circle btn-xxl">Mobile below<br />5000</a>
</div>
</div>
<hr>
<div class="row row-horizon" id="style-11">
<h5 > Shop</h5>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xsx-12">
<a href="http://way2enjoy.com/medicines" class="btn btn-success btn-circle btn-xxl">Itching<br />Solution</a>
</div>
</div>
<hr>
</div>
</body>
</html>
我为我的页面创建了水平滚动并且它没有按预期工作。当我们水平滚动时它不起作用但是当我们垂直滚动时它会在水平制表符中加载内容。 我尝试了几个线程，建议使用溢出隐藏，但没有帮助。
here是演示链接
这是我的js代码
var ID = $(".game-lg-2:last").attr("id");
var oldID = 0;
var loadContent = false;
var loadedID = [];
$(document).ready(function() {
function loadlovephoto() {
if (loadContent == true) {
ID = $(".game-lg-2:last").attr("id");
REFER = $(".referid:last").attr("id");
$('div#lastlove_loader').html('<img src="/files/loading.gif">');
var pathname = window.location.pathname;
if (pathname == "/jquery") {
$.post("jquery/morethread123?action=get&lastlove_id=" + ID, function(data) {
if (data != "") {
$(".game-lg-2:last").after(data);
loadContent = false;
}
$('div#lastlove_loader').empty();
});
} else {
$.post("/touch/w2et/moregames.php?action=get&lastlove_id=" + ID, function(data) {
if (data != "") {
$(".game-lg-2:last").after(data);
loadContent = false;
}
$('div#lastlove_loader').empty();
});
}
oldID = $(".game-lg-2:last").attr("id");
}
};
if (loadContent == false) {
$(window).scroll(function() {
ID = $(".game-lg-2:last").attr("id");
if (($(window).scrollLeft() >= $(document).width() - $(window).width() - 300) && ID != oldID) {
if (ID > 1) {
loadContent = true;
loadlovephoto();
}
}
});
}
});
这是css
html,body{
overflow-x:hidden;
}
.row-horizon {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.row-horizon > [class*="col-lg"], .row-horizon > [class*="col-md"], .row-horizon > [class*="col-sm"], .row-horizon > [class*="col-xs"],.row-horizon > [class*="game-lg"], .row-horizon > [class*="game-md"], .row-horizon > [class*="game-sm"], .row-horizon > [class*="game-xs"] {
float: none;
display: inline-block;
white-space: normal;
vertical-align: top;
}
.row-horizon > .col-xsm-12 {
width: 90%;
}
.row-horizon > .col-xsm-11 {
width: 82.5%;
}
.row-horizon > .col-xsm-10 {
width: 75%;
}
.row-horizon > .col-xsm-9 {
width: 67.5%;
}
.row-horizon > .col-xsm-8 {
width: 60%;
}
.row-horizon > .col-xsm-7 {
width: 52.5%;
}
.row-horizon > .col-xsm-6 {
width: 45%;
}
.row-horizon > .col-xsm-5 {
width: 37.5%;
}
.row-horizon > .col-xsm-4 {
width: 30%;
}
.row-horizon > .col-xsm-3 {
width: 22.5%;
}
.row-horizon > .col-xsm-2 {
width: 15%;
}
.row-horizon > .col-xsm-1 {
width: 7.5%;
}
@media (min-width: 1200px) {
.row-horizon > .col-lg-12 {
width: 90%;
}
.row-horizon > .col-lg-11 {
width: 82.5%;
}
.row-horizon > .col-lg-10 {
width: 75%;
}
.row-horizon > .col-lg-9 {
width: 67.5%;
}
.row-horizon > .col-lg-8 {
width: 60%;
}
.row-horizon > .col-lg-7 {
width: 52.5%;
}
.row-horizon > .col-lg-6 {
width: 45%;
}
.row-horizon > .col-lg-5 {
width: 37.5%;
}
.row-horizon > .col-lg-4 {
width: 30%;
}
.row-horizon > .col-lg-3 {
width: 22.5%;
}
.row-horizon > .col-lg-2 {
width: 15%;
}
.row-horizon > .col-lg-1 {
width: 7.5%;
}
}
.row-horizon > .game-xsm-12 {
width: 90%;
}
.row-horizon > .game-xsm-11 {
width: 82.5%;
}
.row-horizon > .game-xsm-10 {
width: 75%;
}
.row-horizon > .game-xsm-9 {
width: 67.5%;
}
.row-horizon > .game-xsm-8 {
width: 60%;
}
.row-horizon > .game-xsm-7 {
width: 52.5%;
}
.row-horizon > .game-xsm-6 {
width: 45%;
}
.row-horizon > .game-xsm-5 {
width: 37.5%;
}
.row-horizon > .game-xsm-4 {
width: 30%;
}
.row-horizon > .game-xsm-3 {
width: 22.5%;
}
.row-horizon > .game-xsm-2 {
width: 15%;
}
.row-horizon > .game-xsm-1 {
width: 7.5%;
}
@media (min-width: 1200px) {
.row-horizon > .game-lg-12 {
width: 90%;
}
.row-horizon > .game-lg-11 {
width: 82.5%;
}
.row-horizon > .game-lg-10 {
width: 75%;
}
.row-horizon > .game-lg-9 {
width: 67.5%;
}
.row-horizon > .game-lg-8 {
width: 60%;
}
.row-horizon > .game-lg-7 {
width: 52.5%;
}
.row-horizon > .game-lg-6 {
width: 45%;
}
.row-horizon > .game-lg-5 {
width: 37.5%;
}
.row-horizon > .game-lg-4 {
width: 30%;
}
.row-horizon > .game-lg-3 {
width: 22.5%;
}
.row-horizon > .game-lg-2 {
width: 15%;
}
.row-horizon > .game-lg-1 {
width: 7.5%;
}
}
#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
overflow:hidden;height:0px;
}
#style-16:hover::-webkit-scrollbar
{
overflow-y:scroll;height:4px;background-color:#F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
.btn-circle.btn-xxl {
width: 130px;
height: 130px;
padding: 45px 3px;
font-size: 22px;
line-height: 1.33;
border-radius: 65px;
}
here is demo link http://way2enjoy.com/ads/1/frontpagenew1.php
问题。当我们横向滚动时，它应该加载更多游戏，但是当我们垂直滚动时它会加载更多游戏 我已经插入原始html，因为更多的动态加载我不能在片段中添加php代码，因为它不会连接到远程数据库