I want to be able to scroll through the whole page, but without the scrollbar being shown.
I need to compatible for all browsers.
::-webkit-scrollbar {
display: none;
}
Please check the answer(s) posted and mark the one that best answers your question as the answer.
2 Answers
Finally i found the solution for all browers.
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 */
}
SCSS
/SCSS for scrolling all browsers /
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
/* Add the ability to scroll y axis */
overflow-y: scroll;
/* 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>
According to W3Schools, not all browsers support custom scrollbars. This means that you will have to approach the this a different way…
The only other way that I can actually think of to hide the scrollbar while still being able to scroll is to make the element have a width larger than the display size. So do something like this:
#[elements id] {
overflow-x: hidden;
width: calc(100% + [scrollbar width])
}
Actually, I just tried that, and it doesn’t always work… it depends what has the srollbar… so this may not be available in every browser.
You may just have to use what you had said:
::scrollbar {
display: none;
}
/* Though, you may want to add this */
::-webkit-scrollbar {
display: none;
}
Your Answer
asked | |
viewed | 19 |
Related
- 1How to scroll to bottom of div?
- 3Requires Babel “7.0.0-0” but was loaded with “6.26.3”
- 2Scroll to the top of the page using JavaScript?
- 1Is it possible to make Git “forget” about a file that was tracked but is now in .gitignore?
- 2Remove youtube embed video "More videos" bar when pause
- 1How can I add an image in the title bar using HTML?
- 1how can i show progress bar when redirect to another page
- 0jQuery scroll to element
- 1Why “body {background-color}” works in HTML but not in CSS??
- 0Media query properties being overwriiten by other breakpoints Ask
- 0JSP File being downloaded instead of executing