Hide scroll bar, but while still being able to scroll using CSS
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below:
- -webkit- (Chrome, Safari, newer versions of Opera):
.element::-webkit-scrollbar { width: 0 !important }
- -moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }
- -ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }
Important Points to be considered before hiding the Scroll bar :
- Preferably Hide scrollbars only when if all content is visible else user may skip the content
- Avoid horizontal scrolling on Web pages and do not hide horizontal scroll bar as they can make content difficult to read
- If at all , hiding scroll is required : Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Note: The practical example of hiding the scroll bar is Facebook chat window.
Example:
<!DOCTYPE html> < html > < head > < style > .content, .outer-border { width: 240px; height: 150px; text-align:justify; background-color:green; color:white; padding-left:10px; padding-right:10px; } .outer-border { border: 2px solid black; position: relative; overflow: hidden; } .inner-border { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-border::-webkit-scrollbar { display: none; } </ style > </ head > < body > < div class = "outer-border" > < div class = "inner-border" > < div class = "content" > GeeksforGeeks is a computer science portal. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. </ div > </ div > </ div > </ body > </ html > |
chevron_right
filter_none
Output:
Example:
<!DOCTYPE html> < html > < head > < title >hide scrollbar</ title > < style > .content, .outer-border { width: 500px; height: 210px; } .outer-border { border: 2px solid black; position: relative; overflow: hidden; } .inner-border { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-border::-webkit-scrollbar { display: none; } </ style > </ head > < body > < div class = "outer-border" > < div class = "inner-border" > < div class = "content" > < img src= wp-content/uploads/Screenshot-73-1.png"> < img src= wp-content/uploads/Screenshot-74-4.png"> </ div > </ div > </ div > </ body > </ html > |
chevron_right
filter_none
Output: