【问题标题】:Control the position of the horizontal scrollbar without plugin不用插件控制水平滚动条的位置
【发布时间】:2012-02-10 12:31:43
【问题描述】:

我需要你的帮助。也许一个提示就足够了。没见过的东西……

我希望水平滚动条(类滚动)动态地向左滚动到右类的 div 可见部分的开头。请查看 css-part 中的 cmets。

div 的宽度(类:左/右)稍后会动态变化。 所以我必须以某种方式将滚动条定位到右侧部分的开头。

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

你知道怎么做吗? 我知道这很难解释。请问一下。

这是我的 sn-p 代码。

<!-- 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?*/);

【问题讨论】:

    标签: jquery scroll scrollbar scrollto


    【解决方案1】:

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

    对于您的具体问题,如果您想使用 jQuery,这个 sn-p 可能会帮助您:

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

    这是jsFiddle example

    【讨论】:

    • 但他说没有插件
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-20
    • 1970-01-01
    • 1970-01-01
    • 2018-10-20
    • 1970-01-01
    • 1970-01-01
    • 2018-09-25
    相关资源
    最近更新 更多