隐藏滚动条,但仍然可以滚动

Question

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

在谷歌浏览器中它是:

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

但是Mozilla Firefox和Internet Explorer似乎并没有那样工作.

我也在CSS中尝试过这个:

overflow: hidden;

这确实隐藏了滚动条,但我不能滚动了.

有什么办法可以删除滚动条,同时还能滚动整个页面吗？请使用CSS或HTML.

Answer 1

只是一个工作正常的测试.

#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 */
}

工作小提琴

JavaScript的:

由于滚动条宽度在不同浏览器中有所不同,因此最好使用JavaScript处理它.如果这样做Element.offsetWidth - Element.clientWidth,将显示确切的滚动条宽度.

JavaScript工作小提琴

要么

使用Position: absolute,

#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;
}

工作小提琴

JavaScript工作小提琴

信息:

根据这个答案,我创建了一个简单的滚动插件.我希望这会对某人有所帮助.

Answer 2

Webkit易用,可选样式:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Answer 3

这对我有用:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

注意: 在最新版本的Firefox中,overflow: -moz-scrollbars-none;不推荐使用该属性(链接).

Answer 4

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

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

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

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

原始答案:

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

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

演示:

• 垂直
• 横
• 两个方向

垂直版本的示例代码:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

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;
}

Answer 5

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

这是一个有点重叠滚动条与重叠div的技巧,没有任何滚动条

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

这仅适用于webkit浏览器..或者您可以使用特定于浏览器的css(如果将来有任何内容),每个浏览器都可以为其各自的栏提供不同的特定属性

- 编辑 -

对于微软边缘使用:-ms-overflow-style: -ms-autohiding-scrollbar;或-ms-overflow-style: none;为每MSDN.

没有相应的FF虽然有JQuery插件来实现这个 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Answer 6

本答案不包含代码,因此这里是来自页面的解决方案:

根据页面,这种方法不需要提前知道滚动条的宽度,以便工作,解决方案也适用于所有浏览器,并且可以在这里看到.

好处是您不必使用填充或宽度差异来隐藏滚动条.

这也是变焦安全的.填充/宽度解决方案在缩放到最小时显示滚动条.

FF修复:http://jsbin.com/mugiqoveko/1/edit？output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

Answer 7

只需编写这段代码：

::-webkit-scrollbar {
  width: 0px;
}

或者

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

Answer 8

此外，所有浏览器的滚动无滚动条。

CSS

.keep-scrolling {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll y axis*/
}

/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

社会保障局

.keep-scrolling {
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;
      overflow-y: scroll; /* Add the ability to scroll y axis*/

     /* Hide scrollbar for IE, Edge and Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */

      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        display: none;
      }
    }
     

HTML

<div class="keep-scrolling">
</div>

Answer 9

使用它来隐藏滚动条但保留功能：

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

隐藏 IE、Edge 和 Firefox 的滚动条

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Answer 10

只需使用以下3行,您的问题就会解决:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

liaddshape是scrool即将来临的div的名字.

Answer 11

这对我有用

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

Answer 12

以下Sass样式应该使您的滚动条在大多数浏览器上透明（不支持 Firefox）：

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Answer 13

以下内容适用于Microsoft，Chrome和Mozilla的特定div元素：

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

Answer 14

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

相应地应用CSS.

在这里检查 (在IE和FF中测试).

Answer 15

截至2018年12月11日(Firefox 64及更高版本),这个问题的答案非常简单,因为Firefox 64+现在实现了CSS Scrollbar Styling规范.

只需使用以下CSS:

scrollbar-width: none;

这里有 Firefox 64发行说明链接.

Answer 16

要隐藏内容溢出的元素的滚动条，请使用。

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Answer 17

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

Answer 18

这对我的跨浏览器有效。但是，这不会在移动浏览器中隐藏本机滚动条。

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

在CSS中

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Answer 19

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

你写的一切都是正确的，除了“溢出”。适用于 Chrome 和其他浏览器的 webkit

overflow-y: scroll;

或者

overflow-y: auto;

对于 Firefox 和 Edge

scrollbar-width: none;

或者

scrollbar-width: thin;

Answer 20

  scrollbar-width: none;  

为我工作

Answer 21

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中滚动.不确定其他浏览器.

Answer 22

这对我有用：

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

Answer 23

这将在正文中：

<div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
</div>

这是 CSS：

<div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
</div>

Answer 24

这就是我为水平滚动所做的；仅 CSS 并且适用于 Bootstrap / col-* 等框架。它只需要两个额外的divs 和带有 awidth或max-widthset的父级：

如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}

<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

懒人的简短版本：

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}

<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

Answer 25

在现代浏览器上,您可以使用wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});

Answer 26

我的问题:我不希望我的html中有任何样式,我希望我的主体可以直接滚动而不需要任何滚动条,只需要一个垂直滚动,使用css-grid进行任何屏幕尺寸.

该箱大小值的影响填充或利润率的解决方案,它们可与箱尺寸:内容盒.

我仍然需要"-moz-scrollbars-none"指令,就像gdoron和Mr_Green一样,我不得不隐藏滚动条.我试过-moz-transform和-moz-padding-start,只影响firefox,但是有很多工作需要响应的副作用.

此解决方案适用于具有"display:grid"样式的html正文内容,并且具有响应性.

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}

Answer 27

.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}