ie11浏览器的滚动条会自动隐藏和显示，遮住了我的html页面，有没有啥办法让滚动条一直显示？

Posted 2023-04-22

1、如果页面不会超出显示范围，可以直接在html和body的样式里添加：overflow:hidden;将滚动条隐藏就好了。

2、如果页面会根据窗口大小出现滚动条，可以给body添加样式：overflow:scroll，这样就会一直分配有滚动条的位置。并且里面的内容设为100%宽也不会被遮住。 参考技术A

找到html标签


为html 添加css 属性

overflow: scroll;

滚动条就会一直显示，

如果只想显示y轴的滚动条

你可以这样写：overflow-y: scroll;overflow-x: hidden;

参考技术B 除非你指定了滚动条自动隐藏，否则其是不会自动消失的，哪个浏览器也一样
检查下是不是哪里使用了overflow:auto;这个属性追问

没有，谷歌和火狐上是正常的，但是在ie11上面就有这种问题

参考技术C 你肯定用了bootstrap，里面的样式引起的 参考技术D html
/*始终显示滚动条*/
-ms-overflow-style:scrollbar;

滚动条自动显示和隐藏

mac的chrome的滚动条会在停止滚动后自动隐藏，开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。
这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明色，hover时显色。实现了鼠标hover上去时显示滚动条，离开时隐藏。

<div class="container">
	<div style="overflow-y:auto;">
	</div>
</div>

/* 先隐藏原滚动条 */
body::-webkit-scrollbar {
  display: none;
}
body {
  -ms-overflow-style: none;
}

/* hover时显色 */
.container:hover ::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.1);
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/* 滚动条滑块 */
/* 默认时隐藏*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    background: transparent;
}

效果

不hover时

hover时