html滚动条隐藏后不能滚动,隐藏滚动条，但仍然可以滚动

Posted 2021-07-22 weixin_39890543

更新： Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主流浏览器(Chrome，Firefox，IE，Safari等)。

只需将以下CSS应用于要从中删除滚动条的元素：.container {

overflow-y: scroll;

scrollbar-width: none; /* Firefox */

-ms-overflow-style: none;  /* IE 10+ */}.container::-webkit-scrollbar { /* WebKit */

width: 0;

height: 0;}

这是我目前所知道的最少hacky跨浏览器解决方案。看看演示。

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要javascript或专有CSS，它适用于所有浏览器。它不需要明确地设置容器的宽度，从而使其流动。

此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直，水平和双向滚动。

演示：

垂直版本的示例代码：

html：

Your content.  

CSS：.parent{

width: 400px;

height: 200px;

border: 1px solid #aaa;

overflow: hidden;}.child{

height: 100%;

margin-right: -50px; /* maximum width of scrollbar */

padding-right: 50px; /* maximum width of scrollbar */

overflow-y: scroll;}