Question

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

我在this问题和this JSFiddle。

中实现了示例

但是，当我点击滚动条上的空白区域时，我注意到滚动条（即使在JSFiddle中）几乎没有增加。这似乎不是正常行为 - 通常滚动增量要大得多。

我调查了.scrollLeft()：

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

但是，我没有看到滚动增量有任何变化。你如何增加这一步的大小？

Answer 1

我一看到你的代码就知道bug来自哪里，但是我可能需要一些时间来找出一种方法来解释导致我自己或你的错误的逻辑。

目前，这里是基于您提供的JSFiddle示例增加滚动步骤的解决方案:(但请确保您没有运行古老版本的JQuery，否则此解决方案不会赢得＆＃t; t工作，在版本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在评论中所解释的那样，这不是一个容易回答的问题，因为问题不够明确。因此，下次尝试更详细地解释您的问题。为了防止我们所说的小提琴被其原主人或其他人删除，here是我们正在谈论的小提琴的链接，以防万一。

Answer 2

由于您正在查看两个侧边栏，因此它们会阻碍自己。如果删除一个滚动事件，则通常会在空白处单击行为。

如果添加console.log，您可以在代码中看到错误的问题：

$(".wmd-view-topscroll").scroll(function(){
    console.log("test");
        $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });

只需单击一下鼠标，您就会看到多次触发滚动事件。这是不良行为的问题。当你按下白色空间时，两个滚动事件阻碍了自己。

我认为你需要像onScrollFinished这样的东西才能解决这个问题。

更改HTML滚动条增量

2 个答案: