Question

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

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

这是我的代码。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

谢谢你们：）

Answer 1

你可以用Jquery做点什么：

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

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

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

然后你可以这样做：

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

Answer 2

好像你只需要将滚动条放在容器中，因为它已经有static以外的位置属性，顶部和底部滚动条可以放在边缘

example

Changint容器的宽度移动滚动条。

代码：

#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; 
}

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

2 个答案: