Question

<head>
<script>
function yHandler(){



    // Watch video for line by line explanation of the code
    // http://www.youtube.com/watch?v=eziREnZPml4
    var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;
    var flag=0;

    if(y >= contentHeight){
        $(function() {
            var count=0;

    $.ajax({

        type: "GET",
        dataType: "jsonp",
        cache: false,
        url:myurl,
        success: function(data) {

            //var nexturl=data.pagination.next_url;
            //alert(data.pagination.next_url);
              for (var i = 0; i <5; i++) {
                wrap.innerHTML += '<div class="newData"><img src="'+data.data[i].images.low_resolution.url+'"/></div>';
                count++;
                //if(data.pagination.next_url="") flag++;
            //  alert(count);
                if(count>4){
            myurl=data.pagination.next_url;
                //alert(myurl);

                count=0;    
                }
              // alert(data.data[i].images.low_resolution.url);
            }
        }
    });
});
    }
    var status = document.getElementById('status');
    status.innerHTML = contentHeight+" | "+y;
}
var myurl="https://api.instagram.comxxxxxxxxxx";
window.onscroll = yHandler;
</script>
</script>
<style type="text/css">
div#status{position:fixed; font-size:24px;}
div#wrap{width:800px; margin:0px auto;}
div.newData{height:1000px; background:#09F; margin:10px 0px;}
</style>
</head>
<body>
<div id="status">0 | 0</div>
<div id="wrap"><img src="abc.jpg" height="1000"  /></div>
<div id="pics"></div>
</body>

此代码在Google Chrome上完美运行，当用户点击页面底部时，它正在加载新图片。但问题是它不能在firefox中工作，因为即使用户没有点击页面底部，它也会调用yhandler。任何想法。

Answer 1

您可以使用jQuery绑定鼠标滚轮事件。

//火狐

$("body").bind('DOMMouseScroll', function(e){
    if(e.originalEvent.detail){
        yHandler();
    }
});

// IE，Opera，Safari

$("body").bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta){
         yHandler();
     }
});

自定义滚动效果不适用于safari和firefix但在chrome中完美运行？

1 个答案: