1

在这里，我使用 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 :")

     });

上面的功能不起作用...thanx in adavcne :)

4

3 回答 3

1

查看演示

JS代码 -

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

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

function onScroll(){
    alert('Scrolling');
}
于 2013-12-09T12:24:48.043 回答
0

也许对于更多预期的行为：

演示

$('#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 :");
    }
});
于 2013-12-09T12:38:20.157 回答
0

问题是，tinyscrollbar 插件实际上并没有“滚动”。实际上它是设置.overview容器的位置。所以向上滚动 30px 会产生一个像style="top:-30px".

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

我为您创建了一个解决方法，用于测试是否存在滚动操作并调用函数。无论用户通过鼠标滚轮、触控板、箭头键还是通过单击滚动条滚动，这都会为您提供相同的结果，并且当用户仅单击滚动条但实际上并未滚动时不会触发事件。

继承人的代码：

$('#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/

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

于 2013-12-09T12:38:25.250 回答