如何根据div计算自定义滚动条的宽度？答案

【问题标题】：how to calculate width for custom scrollbar according to the div?如何根据div计算自定义滚动条的宽度？
【发布时间】：2015-10-21 18:04:33
【问题描述】：

我有一个 div 容器，我正在为它制作一个自定义滚动条。我现在面临的问题是如何计算 scollbar 的宽度并设置它。

由于我的 div 的宽度是动态变化的，所以滚动条的宽度也应该根据 div 变化。我无法计算滚动条的宽度。

这是我的代码。

#track{
    width: 300px;
    height: 200px;
    position:relative;
    overflow:hidden;
}
#container{
    width: 500px;
    height: 400px;
    position:absolute;
}
#top{
    width:10px;
    height:100px;
    background-color:gray;
    position:absolute;
    top:0;
    right:0;
}
#bottom{
    width:100px;
    height:10px;
    background-color:gray;
    position:absolute;
    bottom:0;
    left:0;
}

<div id="track">
    <div id="container">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="top"></div>
    <div id="bottom"></div>
</div>

目前，宽度是静态分配的。我想根据 div container 的宽度动态计算滚动条的宽度并设置为它。

例如，转到此链接jsfiddle.net/d7pqbkrx/。改变容器的宽度，滚动条的宽度会根据container的宽度自动改变。所以，像这样，我想动态地改变我的滚动条宽度。

谢谢大家:)

【问题讨论】：

使用 jscrollpane : jscrollpane.kelvinluck.com
@Viktor Maksimov 实际上我不应该使用任何插件。我对此有一些限制。对我来说，除了这个宽度外，一切都在工作。你能帮忙吗？
您能解释一下滚动条的宽度是指厚度还是位置？
@Antonio Smoljan 我改变了问题。请看到并帮助我:)

标签： javascript jquery html css

【解决方案1】：

你可以用 Jquery 做一些事情：

$('#container').width();

将返回 div#container 的宽度。您可以编写一个函数并在每次更新 div 的内容时运行它：

function checkContainerWidth(){
    var width = $('#container').width();
    console.log(width);
    return width;
};

然后你可以这样做：

function setScrollbarWidth(){
    var width = checkContainerWidth();
    $('#scrollbar').css("width", width);
};

【讨论】：

其实我想设置滚动条的宽度，通过获取容器的宽度，如何设置滚动条的宽度？
我改了问题。请看那个，我想要那样

【解决方案2】：

似乎您只需要将滚动条放在容器内，因为它已经具有除static 之外的位置属性@ 顶部和底部滚动条可以定位到边缘

example

改变容器的宽度移动滚动条。

代码：

#container{
  padding: 10px;
    width: 500px;
    height: 400px;
    position:absolute;
}
#top{
    width:10px;
    height:100px;
    background-color:gray;
    position:absolute;
    top:0;
    right:0;
}
#bottom{
    width:100px;
    height:10px;
    background-color:gray;
    position:absolute; 
}

【讨论】：