在 jQuery 中将百分比值设置为 scrollLeft()

Question

这有点令人困惑（我认为这是不可能的）。我找到了如何从Blazemonger's answer on SO获取滚动量百分比：

scrollPercentage = 100 * $(this).scrollLeft() / ($('#contained').width() - $(this).width());

好的，这个解决方案很好用，但是我的问题是如何使用 jQuery 设置滚动量？

我同时滚动两个可滚动的 div，我尝试了这个：

$(".mycontainer").scroll(function(){    
    var scrollPercentage = 100 * $(this).scrollLeft() / ($(".mycontainerContent").width() - $(this).width())
        $(".anotherContainer").scrollLeft(scrollPercentage);
});

但该代码不起作用。

我尝试添加百分比符号，但结果相同 - 没有任何反应。

$(".mycontainer").scroll(function(){    
    var scrollPercentage = 100 * $(this).scrollLeft() / ($(".mycontainerContent").width() - $(this).width())
        $(".anotherContainer").scrollLeft(scrollPercentage.toFixed(0)+'%');
});

有什么想法吗？

编辑 - jgasiorowski's answer 有点工作：

您需要再次将百分比值更改为原始类型以进行滚动

 var scrollValueForAnother = ($(".anotherContainer").width() -
 $(this).width()) * (percentage / 100);
 $(".anotherContainer").scrollLeft(scrollValueForAnother);

希望我没有计算错误

但就像我在他的回答的评论中提到的那样：

它有点工作，但 $(".anotherContainer") 之前到达结束 $(".myContainer") 到达终点。我想同步两个可滚动区域 同时到达卷轴的尽头。我希望我能 解释一下。

*两个可滚动区域的宽度不同！

Answer 1

您需要再次将百分比值更改为原始类型以进行滚动

var scrollValueForAnother = ($(".anotherContainer").width() - $(this).width()) * (percentage / 100);
$(".anotherContainer").scrollLeft(scrollValueForAnother);

希望我没有计算错误

EDIT2：我做了那个小小提琴https://jsfiddle.net/b4d9bLnm/1/ 所以你的代码应该是这样的：

$(".mycontainer").scroll(function(){  
    var container2 = $(".anotherContainer");  
    var scrollPercentage = 100 * $(this).scrollLeft() / (this.scrollWidth - this.clientWidth);

    var scrollValueForAnother = (container2[0].scrollWidth -  container2[0].clientWidth) * (percentage / 100);
    $(".anotherContainer").scrollLeft(scrollValueForAnother);
});