javascript - 更改 HTML 滚动条增量

标签 javascript jquery html css

我有一个 HTML div,CSS 设置为 overflow,但我无法设置滚动增量。

我在 this 中实现了示例问题和this JSFiddle.

但是,我注意到当您单击滚动条上的空白区域时,滚动条(即使在 JSFiddle 中)几乎没有增加。这看起来不像是正常行为 - 通常滚动增量要大得多。

我查看了 .scrollLeft():

$('.wmd-view-topscroll').animate({scrollLeft: '+=30'}, 0);

但是,我没有看到滚动增量有任何变化。你如何增加这里的步长?

最佳答案

我一看到您的代码就知道错误是从哪里来的,但是我可能需要一些时间才能想出一种方法来向我自己或您解释导致错误的逻辑。

目前,这是基于您提供的 JSFiddle 示例增加滚动步长的解决方案:(但是请确保您运行的不是旧版本的 JQuery,否则此解决方案将不起作用,在 1.9.1 版本上测试,一切正常)

$(function(){
$(".wmd-view-topscroll").on("scroll",function(){

clearTimeout($.data(this, 'scrollTimer'));

$.data(this, 'scrollTimer', setTimeout(function() {
    $(".wmd-view").scrollLeft($(".wmd-view-topscroll").scrollLeft());
}, 50));

});
$(".wmd-view").on("scroll", function(){
    $(".wmd-view-topscroll").scrollLeft($(".wmd-view").scrollLeft());
});

});

我添加的部分是做什么的,它是在等待滚动完成之前在另一个元素上设置新滚动,我只是想将超时设置为 50,将其设置为任何值只要滚动条足够长,可以到达您单击的位置,您就喜欢。

编辑 1:感谢@Schlumpf 消除了我的疑虑,您有 2 个事件,每当您调用其中一个事件时,另一个事件就会被调用,而另一个事件又会回调那个事件调用它并将其新滚动设置为其自身的当前滚动(第二个元素的滚动),因此覆盖您想要的原始滚动。 正如@Schlumpf 指出的那样,每当您调用其中一个滚动事件以查看我们在谈论什么时,只需尝试创建一个 console.log([whatever])

如果您需要我详细说明,请在评论中询问。

编辑 2:正如 Rob 在评论中解释的那样,这不是一个容易回答的问题,因为问题还不够清楚。因此,下次 OP 时尽量更详细地解释您的问题。以防万一我们正在谈论的 fiddle 被其原始所有者或其他人删除,here是我们正在谈论的 fiddle 的链接,以防万一。

关于javascript - 更改 HTML 滚动条增量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44686737/

相关文章:

javascript - Gmail 类型 javascript 正则表达式 - 不允许重复无效字符

Javascript - 如何在 2 个数组之间循环?

html - 将 div 拆分为 2 列

html - 当元素从 display none 中显示时,Div 不会自动调整高度

Javascript Cookie 问题 IE

javascript - 仅加载在此页面上使用的 flexslider 类型

javascript - 在 Angular Directive(指令)中的元素之前插入

javascript - 带有给出 "[object Object] does not fit the Control specification"错误的表格的 Google 图表

javascript - 不理解 JS 中的这个 setTimeout

eclipse - 使用 Eclipse IDE 开发 HTML5 应用程序