Question

这里我使用了tinyscrollbar来代码。所以在这里我为tinyscrollbar写滚动事件，但它不起作用。你能救我吗？

<div id="scrollbar1" class="scrollBox">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
  <div class="viewport">
    <div class="overview">
    gula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis,
        </div>
              </div>
                </div>

请参阅示例http://jsfiddle.net/rushijogle/7u377/7/

 $("#scrollbar1 .viewport").scroll(function(){

  alert("Scroller is scrolling :")

     });

上述功能在adavcne中不起作用... thanx：）

Answer 1

<强> SEE THE DEMO

JS代码 -

$('#scrollbar1').tinyscrollbar();

$("#scrollbar1").on('mousewheel DOMMouseScroll', function() {
    onScroll();
});
$("#scrollbar1").on('mouseup', '.scrollbar', function(){
    onScroll();
});

function onScroll(){
    alert('Scrolling');
}

Answer 2

可能是为了更多预期的行为：

DEMO

$('#scrollbar1').on('mousemove mouseup mousewheel DOMMouseScroll touchmove touchend', function (e) {
    if ($('body').is('.noSelect') || ((e.type === "mouseup" || e.type === "touchend") && $(e.target).closest('.scrollbar').length)) {
        console.log("Scroller is scrolling :");
    }
});

Answer 3

问题是，tinyscrollbar插件实际上并没有“滚动”。实际上，它正在设置.overview容器的位置。因此，向上滚动30px将导致像style="top:-30px"这样的css属性。

没有注册滚动事件..因为没有滚动事件。不幸的是，该插件不提供回调，因此它会在滚动时告诉您。

我为您创建了一个解决方法，用于测试是否存在滚动操作并调用函数。如果用户通过鼠标滚轮，触控板，箭头键或在滚动条上点击滚动，这可以得到相同的结果，并且当用户仅点击滚动条但没有实际滚动时，不会触发事件。

下面是代码：

$('#scrollbar1').tinyscrollbar();

// onScroll test function
$.onScroll = function(scrollbar, callback){
    scrollbar = $(".overview", scrollbar);
    var top = scrollbar.css("top");

    setInterval(function(){
       var now = scrollbar.css("top");
       if(now !== top) callback();
       top=now;
    }, 100);   
}

// In use
$.onScroll($("#scrollbar1"), function(){
    console.log("Scroller is scrolling :")
})

这是小提琴：http://jsfiddle.net/2gc6H/

请注意，每个滚动事件都会显示在控制台中。

Jquery scroll（）函数不起作用

3 个答案: