滚动条样式神秘地改变了

Question

出于某种原因，我的滚动条的样式发生了变化。

我没有更改任何溢出样式（我使用overflow-y: scroll作为我的div）。

当div没有滚动时，滚动条曾经消失，类似于Facebook聊天中使用的滚动条。

现在它有这个静态边框，滚动条不会消失：

我使用的是Chrome浏览器。

Answer 1

你可以使用一些javascript来检测用户滚动然后显示滚动条

这是一个片段

＆＃13;

＆＃13;

function scroll(e){
e.target.style.overflow='scroll';
}
function noscroll(e){
e.target.style.overflow='hidden';
}
document.getElementById('div').onwheel=scroll;
document.getElementById('div').onmouseout=noscroll;

＆＃13;

div {
  width:200px;
  height:100px;
  border:solid black;
  overflow-y: hidden;
  
}

＆＃13;

<div id="div">
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您希望仅在有要滚动的内容时才显示滚动条，请使用overflow: auto代替overflow: scroll

Answer 3

一种方法是创建自定义滚动窗格。然后，当鼠标离开时，很容易将滚动条的不透明度设置为零，如

scrollpane.onwheel = function(){
    scrollbar.style.opacity = 1;
};
scrollpane.onmouseout = function(){
    scrollbar.style.opacity = 0;
}

另一种方法是使用另一个元素隐藏滚动条。您可以使用overflow:hidden创建外部div，使用overflow:scroll创建内部div。然后为两个div设置绝对大小，并使内部div比外部div大20px。这应该隐藏滚动条。

我想补充一点，很难回答这么模糊的问题。如果你在你的问题中编写代码会更容易。

修改

我创建了一个有效的jsfiddle 自定义滚动条。

自定义滚动条有点困难，因为涉及许多事件，并且它们在不同的浏览器中的工作方式不同。例如，它可能无法在移动设备上正常运行。我在拖动滑块时禁用了文本选择，但这在所有浏览器上都不起作用。

当光标位于自定义滚动窗格时，我甚至设法阻止在页面上滚动。

我希望这符合您的期望！

Aloso