隐藏滚动条，但仍可以滚动

我希望能够滚动整个页面，但不显示滚动条。

在Google Chrome中，它是：

::-webkit-scrollbar {
    display: none;
}

但Mozilla Firefox和Internet Explorer似乎不是这样工作的。

我也在CSS中尝试过：

overflow: hidden;

这确实隐藏了滚动条，但我不能再滚动了。

有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？

请只使用CSS或HTML。

当前回答

只需将子对象的宽度设置为100%，将填充设置为15像素，将overflow-x设置为滚动和溢出：为父对象隐藏，并设置您想要的宽度。

它适用于所有主要浏览器，包括Internet Explorer和Edge，但Internet Explorer 8及更低版本除外。

2015-10-20 15:15:15

其他回答

只需将子对象的宽度设置为100%，将填充设置为15像素，将overflow-x设置为滚动和溢出：为父对象隐藏，并设置您想要的宽度。

它适用于所有主要浏览器，包括Internet Explorer和Edge，但Internet Explorer 8及更低版本除外。

2015-10-20 15:15:15

这个棘手的解决方案甚至可以在旧的Internet Explorer web浏览器上使用。

这是[垂直滚动条]的变通方法

<html>

<head>
  <style>
    html,
    body {
      overflow: -moz-scrollbars-vertical;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
  <!--your stuff here-->
</body>

</html>

试试看：jsfiddle

2020-03-29 00:34:30

Use

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

对于您想要加载、卸载或重新加载滚动条的任何点，调用这些函数。当我在Chrome中测试它时，它仍然可以在Chrome中滚动，但我不确定其他浏览器。

2014-08-03 14:49:08

另一个简单的工作小提琴：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

父容器上隐藏溢出，子容器上自动溢出。易于理解的

2014-04-11 03:11:26

只是一个测试，效果很好。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

工作Fiddle

JavaScript：

由于不同浏览器的滚动条宽度不同，最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth，将显示精确的滚动条宽度。

JavaScript工作Fiddle

使用位置：绝对，

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

工作Fiddle

JavaScript工作Fiddle

信息：

基于这个答案，我创建了一个简单的滚动插件。

2013-05-21 13:37:22

隐藏滚动条，但仍可以滚动

推荐文章

最新文章

标签