【问题标题】:how to detect native scrollbar's button click event?如何检测原生滚动条的按钮点击事件?
【发布时间】:2016-03-09 07:05:27
【问题描述】:

我想知道是否可以检测到本机滚动条的左/右或上/下按钮单击事件。我想知道,因为我想提供滚动条的自定义行为,例如仅在某些固定步骤中滚动等。我使用了滚动功能,但它并没有完全给我想要的平滑度:

var step = 200;
var nextPos=-1;
var pos;
var scrolltarget;
$(' .scrollable ul').scroll(function(e){
    clearTimeout($.data(this, 'scrollTimer'));
    scrolltarget=$(this);
    $.data(this, 'scrollTimer', setTimeout(function() {
        pos=scrolltarget.scrollLeft();
        if(pos%step!=0){
          if(pos>nextPos){
            scrolltarget.animate({
              scrollLeft: pos-pos%step+step
            },250);
          }
          else if(pos<nextPos){
            scrolltarget.animate({
              scrollLeft: pos-pos%step
            },250);
          }
        }

        nextPos=scrolltarget.scrollLeft();
    }, 250));         
});

【问题讨论】:

  • 在您的浏览器中使用 firebug/web 开发者扩展,或者您可以使用检查元素和 ctrl+U。
  • 在 chrome 检查元素中没有显示任何与滚动条相关的 div 将尝试 firebug/web 开发人员
  • 网络开发者扩展在这里很有帮助

标签: javascript jquery html


【解决方案1】:

你可以使用

$( window ).scroll(function() {
 // your java script code 
});

我建议你看看这个scroll jquery event

【讨论】:

  • 我用过这个,但唯一的问题是滚动是一个通用事件,当用户以不同的方式与滚动条交互时,很难做不同的事情,比如他们可以使用鼠标滚轮,他们可以拖动滚动条,他们可以单击滚动按钮等。虽然我的代码平滑了其他交互,但当用户使用鼠标按钮滚动时,它并不能很好地工作。
  • 谢谢,我已经看过那个帖子了。我使用了鼠标滚轮插件并为鼠标滚轮事件编写了代码。使用我当前的代码,鼠标滚轮没有问题。如果单击滚动条按钮,我只想给出一个单独的 bahaviour。
  • 这个插件jQuery custom content scroller 正在讨论制作带有很多事件的自定义滚动条,我希望它会有所帮助。
  • 谢谢,但我也使用了malihu自定义滚动条插件,它不是轻量级的。因为我正在应用水平滚动,当页面最初加载时看起来都是乱码。如果我调用 window.load() 中的方法,浏览器会挂起一段时间,我认为这不是那么顺利。我正在尝试其他插件,但找不到一个可以实现逐步滚动的简单 enuf 插件。
猜你喜欢
  • 2011-07-20
  • 1970-01-01
  • 1970-01-01
  • 2015-04-25
  • 1970-01-01
  • 2017-03-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多