如何在不增加页面内容的情况下为滚动条赋予固定高度？答案

【问题标题】：How to Give a Fixed Height to the Scroller without Increasing the Page Content?如何在不增加页面内容的情况下为滚动条赋予固定高度？
【发布时间】：2018-08-28 07:00:03
【问题描述】：

在这里，我试图为滚动条提供一个与页面内容高度无关的固定高度。我在下面添加了我的代码。

section#data-container{
    height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>

它的出现就像下面显示的图像上的显示一样

我想减小宽度并将其设置为固定。有人可以帮帮我吗？

【问题讨论】：

I asked similar question some time ago，但没有解决方案，只有我在那里展示的 webkit-only 技巧。
@AndrzejZiółek 哦，对不起。我真的是说滚动条
你想要什么，你不想显示滚动吗？或者你想要滚动器
@charankumar 我想给我的滚动条一个与内容高度无关的固定大小
我不认为我们可以改变滚动条的高度，它总是基于内容的高度，我们只能控制宽度

标签： html css scroll scrollview

【解决方案1】：

尝试在data-container 中输入min-height。

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;

}

sn-p 上的代码

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>

【讨论】：

数据容器如何影响滚动条的高度？以及您在哪里为滚动条指定了固定高度？
尝试增加最小高度值。
或者，将元素放在一个 div 中，并为该 div 赋予 min-height。
并检查您的代码是如何工作的...我已经在 sn-p 上添加了它。它完全隐藏了滚动条。