Question

我需要你的帮助。也许暗示就足够了。我没见过的东西......

我希望水平滚动条（类滚动）动态scrollLeft到class右边的可见部分的开头。请查看css-part中的注释。

div的宽度（类：左/右）稍后会动态变化。所以我不得不将滚动条定位到右侧部分的开头。

边框始终位于屏幕中间。右边部分应位于边界右侧，左侧部分位于左侧。

你知道怎么做吗？我知道解释起来很棘手。请问。

这是我的代码片段。

<!-- HTML -->
<div class="width100">
    <div class="scroll">
        <div class="outer">
            <div class="border"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>

-

<!-- CSS -->
.width {
    width:100%;
}
.scroll {
    overflow-x: scroll;
}
.outer {
    width: 960px;
    height: 55px;
    background-color: orange;
}
.border {
    width: 2px;
    height: 55px;
    margin-left:50%;
    position:absolute;
    background-color:black; // will be background-image with width: 960px;
}
.left {
    float: left;
    width: 400px; //varies
    height: 55px;
    position:relative;    
}
.right {
    width:560px; //varies
    float: left;
    height: 55px;
    background-color:green; // will be background-image with width: 960px;
}

-

<!-- Javascript -->
$('.scroll').scrollLeft(/*to position?*/);

Answer 1

名为scollLeft的元素上有一个属性。它获取或设置元素内容向左滚动的像素数。

针对您的具体问题，如果您想使用jQuery，此代码段可能会对您有所帮助：

$('.scroll')[0].scrollLeft = $('.left').width()

这是jsFiddle example。

在没有插件的情况下控制水平滚动条的位置

1 个答案: