Javascript 更改HTML滚动条增量

我有一个HTML

div

，CSS设置为

overflow

，但我无法设置滚动增量

我实现了有问题的示例和JSFIDLE

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

我查看了

.scrollLeft（）

：

---

但是，我没有看到滚动增量有任何变化。如何在此处增加步骤的大小？

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

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

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

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

---

我想你需要像onScrollFinished这样的东西来解决这个问题。

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

现在，以下是基于您提供的JSFIDLE示例增加滚动步数的解决方案：（但是，请确保您没有运行古老版本的JQuery，否则此解决方案将无法工作，在1.9.1版上进行了测试，并且一切正常）

我添加的部分的作用是，在设置另一个元素上的新滚动之前，它会等待滚动完成，我只想将超时设置为

50

，设置为任何您喜欢的值，只要它足够长，滚动条可以到达您单击的点

编辑1:感谢@Schlumpf澄清了我的疑问，您有2个事件，当您调用其中一个事件时，另一个事件会被调用，而另一个事件会依次调用调用它的事件，并将其新滚动设置为自身的当前滚动（第二个元素的滚动）因此，覆盖您想要的原始卷轴。 正如@Schlumpf所指出的，只要试着在调用其中一个滚动事件时创建一个

console.log（[无论什么]）

，就可以看到我们在谈论什么

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

---

编辑2:正如Rob在评论中解释的那样，这不是一个容易回答的问题，因为问题不够清楚。所以下次请尽量更详细地解释你的问题，以防我们正在谈论的小提琴被它的原主人删除或其他什么，这是我们正在谈论的小提琴的链接，以防万一。

我将您的代码复制并粘贴到JSFIDLE中，它修复了滚动问题，但实际上并没有滚动表anymore@AlexPetralia确保您正在JSFIDLE中运行最新版本的JQuery，一切都会正常工作（单击右上角的Javascript按钮，单击JQuery下拉列表并将其更改为新版本）。在fiddle中，使用了一个旧版本的JQuery，它不支持我设置超时的方法。我们的想法是在当前元素完成滚动之前不要滚动另一个元素。@AlexPetralia刚刚在1.9.1版上对此进行了测试，一切正常。@AlexPetralia另外，如果您不想等到元素完成scro，请要滚动另一个元素，则必须找出一种方法，防止从另一个元素的滚动事件调用的事件设置最初调用它的元素的滚动（这可能有点难处理，只需多次读取）@Taurus你回答这个问题是一种伤害，因为这个问题没有提供SO本身所需的代码，这是一种要求。当这个JSFIDLE改变或消失时，你的答案和问题将变得毫无价值，对将来有同样问题的任何人来说都是无用的。“回答问得好的问题并非所有问题都可以或应该在此处回答。”您需要在此处发布示例代码，而不是明天可能更改或消失的第三方网站。以防万一小提琴的所有者决定删除他们的小提琴，[此处]（编辑2：正如Rob在评论中所解释的，这不是一个容易回答的问题，因为问题还不够清楚。因此，请尝试在下一次操作时更详细地解释您的问题。以防我们正在谈论的小提琴被其原始所有者或其他任何人删除，我们正在谈论的小提琴（抱歉，Rob的冗余）。

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

$(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());
});

});