Hiding the scroll bar on an HTML page

前端未结

关注

 21  1051

旧巷少年郎

Can CSS be used to hide the scroll bar? How would you do this?

相关标签:

21条回答

不要未来只要你来

2020-11-22 00:59

To disable the vertical scroll bar, just add overflow-y:hidden;.

Find more about it: overflow.

0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2020-11-22 00:59
Can CSS be used to hide the scroll bar? How would you do this?

If you wish to remove vertical (and horizontal) scrollbars from a browser viewport, add:
```
style="position: fixed;"
```
to the <body> element.

Javascript:
```
document.body.style.position = 'fixed';
```
CSS:
```
body {
  position: fixed;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
春和景丽

2020-11-22 01:02
If you want scrolling to work, before hiding scrollbars, consider styling them. Modern versions of OS X and mobile OS's have scrollbars that, while impractical for grabbing with a mouse, are quite beautiful and neutral.

To hide scrollbars, a technique by John Kurlak works well except for leaving Firefox users who don't have touchpads with no way to scroll unless they have a mouse with a wheel, which they probably do, but even then they can usually only scroll vertically.

John's technique uses three elements:
- An outer element to mask the scrollbars.
- A middle element to have the scrollbars.
- And a content element to both set the size of the middle element and make it have scrollbars.
It must be possible to set the size of the outer and content elements the same which eliminates using percentages, but I can't think of anything else that won't work with the right tweaking.

My biggest concern is whether all versions of browsers set scrollbars to make visible overflowed content visible. I have tested in current browsers, but not older ones.

Pardon my SASS ;P
```
%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}
```
Testing

OS X is 10.6.8. Windows is Windows 7.
- Firefox 32.0 Scrollbars hidden. Arrow keys don't scroll, even after clicking to focus, but mouse wheel and two fingers on trackpad do. OS X and Windows.
- Chrome 37.0 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel and trackpad work. OS X and Windows.
- Internet Explorer 11 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel works. Windows.
- Safari 5.1.10 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel and trackpad work. OS X.
- Android 4.4.4 and 4.1.2. Scrollbars hidden. Touch scrolling works. Tried in Chrome 37.0, Firefox 32.0, and HTMLViewer on 4.4.4 (whatever that is). In HTMLViewer, the page is the size of the masked content and can be scrolled too! Scrolling interacts acceptably with page zooming.
0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-11-22 01:03

You can accomplish this with a wrapper div that has its overflow hidden, and the inner div set to auto.

To remove the inner div's scroll bar, you can pull it out of the outer div's viewport by applying a negative margin to the inner div. Then apply equal padding to the inner div so that the content stays in view.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

0 讨论(0)

失恋的感觉

2020-11-22 01:03
Here's my solution, which theoretically covers all modern browsers:
```
html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}
```
html can be replaced with any element you want to hide the scrollbar of.

_{Note: I've skimmed the other 19 answers to see if the code I'm posting has already been covered, and it seems like no single answer sums up the situation as it stands in 2019, although plenty of them go into excellent detail. Apologies if this has been said by someone else and I missed it.}
0 讨论(0)
发布评论:

提交评论
- 加载中...

[愿得一人]

2020-11-22 01:04

Cross browser approach to hiding the scrollbar.

It was tested on Edge, Chrome, Firefox, and Safari

Hide scrollbar while still being able to scroll with mouse wheel!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

0 讨论(0)

Hiding the scroll bar on an HTML page

Testing

HTML

CSS