发表新帖
发表新帖

Hide scroll bar, but while still being able to scroll

前端 未结
关注
30 3285
悲哀的现实
悲哀的现实 2020-11-21 04:22

I want to be able to scroll through the whole page, but without the scrollbar being shown.

In Google Chrome it\'s:

::-webkit-scrollbar {
    display:
相关标签:
30条回答
  • 萌比男神i
    2020-11-21 04:39

    Adding padding to an inner div, as in the currently accepted answer, won't work if for some reason you want to use box-model: border-box.

    What does work in both cases is increasing the width of the inner div to 100% plus the scrollbar's width (assuming overflow: hidden on the outer div).

    For example, in CSS:

    .container2 {
    width: calc(100% + 19px);
}

    In JavaScript, cross-browser:

    var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
    0 讨论(0)
  • 终归单人心
    2020-11-21 04:40

    This works for me cross-browser. However, this doesn't hide native scrollbars on mobile browsers.

    In SCSS

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

    In CSS

    .hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}
    0 讨论(0)
  • 既然无缘
    2020-11-21 04:42

    It is easy in WebKit, with optional styling:

    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;
}
    0 讨论(0)
  • 眼角桃花
    2020-11-21 04:42

    This tricky solution works even on old IE web browser

    It's a workaround to the [ vertical scrollbar ]

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

    Just try it: jsfiddle

    0 讨论(0)
  • 情书的邮戳
    2020-11-21 04:43

    UPDATE:

    Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).

    Simply apply the following CSS to the element you want to remove scrollbars from:

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

    This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

    ORIGINAL ANSWER:

    Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn't require explicitly setting the width of the container either, thus making it fluid.

    This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

    Demos:

    • Vertical
    • Horizontal
    • Both directions

    Example code for the vertical version:

    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;
}
    0 讨论(0)
  • 南旧
    2020-11-21 04:44

    The following SASS styling should make your scrollbar transparent on most browsers (Firefox is not supported):

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

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

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

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}
    0 讨论(0)
 看不清?
提交回复
热议问题