Question

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

[
    {
        "testExecutionPlanUid": "d59f624b-2db6-42b8-802f-36a0bba95855",
        "testCase": [
            {
                "resultid": "859a88d5-6251-4d3a-97ba-dcba1c45f436",
                "testExecutionPlanUid": null,
                "taskid": null,
                "fteId": null,
                "testPlan": "Default suite",
                "testExecutionPlanFullName": null,
                "testScript": "B_create",
                "type": "REGRESSION",
                "env": "QA",
                "status": "SUCCESSFUL",
                "baseurl": null,
                "buildNo": "15.1.1",
                "buildInfo": null,
                "runtimeVersion": null,
                "executiontime": null,
                "time": "2015-04-18 09:59:54.405",
                "dateStatus": "6 months ago",
                "capabilities": null,
                "testExecutionPlanXml": null,
                "requestLog": null,
                "executionlog": null,
                "fileAttachments": 0,
                "attachements": null,
                "dataTable": null,
                "automator": null,
                "node": null
            }
        ]
    },
    {
        "testExecutionPlanUid": "d59f624b-2db6-42b8-802f-36a0bba95895",
        "testCase": [
            {
                "resultid": "859a88d5-6251-4d3a-97ba-dcba1c45f436",
                "testExecutionPlanUid": null,
                "taskid": null,
                "fteId": null,
                "testPlan": "Default suite",
                "testExecutionPlanFullName": null,
                "testScript": "BcreatePO",
                "type": "REGRESSION",
                "env": "QA",
                "status": "SUCCESSFUL",
                "baseurl": null,
                "buildNo": "15.1.1",
                "buildInfo": null,
                "runtimeVersion": null,
                "executiontime": null,
                "time": "2015-04-18 09:59:54.405",
                "dateStatus": "6 months ago",
                "capabilities": null,
                "testExecutionPlanXml": null,
                "requestLog": null,
                "executionlog": null,
                "fileAttachments": 0,
                "attachements": null,
                "dataTable": null,
                "automator": null,
                "node": null
            }
        ]
    }
]

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

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

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

但该代码不起作用。

我尝试添加百分号，但结果是一样的 - 没有任何反应。

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

有什么想法吗？

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

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

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

我希望我在计算中没有犯错误

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

它有点工作，但$（“。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);
});

在jQuery中将百分比值设置为scrollLeft（）

1 个答案: