Question

我有一个自定义垂直滚动条。它有下一个结构：

div (general container)-- style table height 300 px

   div "uparrow"    style tablerow height 20px

   div "slider"     style tablerow NO height (automATIC)

      div "line or guide" 

      div "for handle"

   div "downarrow"  style tablerow height 20px

好的，这很好用。我可以改变一般的容器高度，并且每个都正确调整大小。

我的问题：我想将垂直手柄放在＆＃39;滑块内。（我有javascript代码来设置style.top）

我想要＆＃39; center＆＃39;对于线路和＆amp;手柄。使用margin-left：auto margin-right：auto适用于＆＃39; line＆＃39;但是滑块放不好。

我没有成功地玩一些相对/绝对组合。

此外，我正在把手柄放在线内，结果也是错误的。

图像显示了我想要的内容（在这种情况下，uparrow＆amp; downarrow为空）

任何想法和建议？

scrollbar

Answer 1

父div应该有position: relative。滑块按钮position: absolute和left: 50% margin-left应为其宽度的减半部分。示例如果宽度为20px，则剩余边距应为-10px。

绝对位置允许按钮在滑块上方流动。位置相对强制滑块遵循父div的偏移量。左边50％将元素的左边界放在中心。实际的中心是由左边距离完成的。它将元素的宽度设置为一半。

使用纯css示例：

    div.sliderContainer {
        width: 30px;
        height: 300px;
        background-color: #EEEEEE;
        border: 2px solid #99B2FF;
        border-radius: 3px 3px 3px 3px;
        box-sizing: border-box;
        position: relative;
        padding: 10px 0px 10px 0px;
    }

    div.sliderLine {
        width: 4px;
        outline: 1px solid #888888;
        background-color: #AAAAAA;
        box-shadow: inset 1px 1px 0px #ffffff;
        margin: auto auto;
        box-sizing: border-box;
        height: 100%;
    }

    div.sliderButton {
        box-sizing: border-box;
        width: 20px;
        margin-left: -10px;
        position: absolute;
        left: 50%;
        top: 20px;
        height: 30px;
        border: 1px solid #AAAAAA;
        border-radius: 3px 3px 3px 3px;
        background-color: #EEEEEE;
        box-shadow: inset 1px 1px 0px #ffffff;          
    }

HTML

<div id="slider_01" class="sliderContainer">
    <div class="sliderLine"></div>
    <div class="sliderButton"></div>
</div>

fiddle作为证据。

自定义垂直滚动条的重叠div失败

1 个答案: