Skip to content
Fix Code Error

Hide scroll bar, but while still being able to scroll

March 13, 2021 by Code Error
Posted By: Anonymous

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

But Mozilla Firefox and Internet Explorer don’t seem to work like that.

I also tried this in CSS:

overflow: hidden;

That does hide the scrollbar, but I can’t scroll any more.

Is there a way I can remove the scrollbar while still being able to scroll the whole page?

With just CSS or HTML, please.

Solution

Just a test which is working fine.

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

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

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

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

Answered By: Anonymous

Related Articles

  • Active tab issue on page load HTML
  • How do I style a dropdown with only CSS?
  • CSS customized scroll bar in div
  • Chrome / Safari not filling 100% height of flex parent
  • What does do?
  • Having trouble with my nav bar/header, It used to…
  • Is it possible to apply CSS to half of a character?
  • Increasing size of semi circle using css
  • What are the nuances of scope prototypal /…
  • How to show title in hover - css / jquery
  • Pass props to parent component in React.js
  • Why are CSS keyframe animations broken in Vue…
  • Is there any "font smoothing" in Google Chrome?
  • How do i update a javascript variable as its value changes?
  • Adobe XD to responsive html
  • Running Internet Explorer 6, Internet Explorer 7,…
  • Use of Jquery on scroll event
  • Jquery fadeToggle Trouble
  • After a little scroll, the sticky navbar just is not…
  • Make Iframe to fit 100% of container's remaining height
  • How to vertically align an image inside a div
  • during wct test: Failed to load resource: the server…
  • Animating Elements in One by One
  • HTML table with 100% width, with vertical scroll…
  • Preventing scroll bars from being hidden for MacOS…
  • CSS animation as a Google Map Marker (Polymer 1.0)?
  • What are the currently supported CSS selectors…
  • Centering in CSS Grid
  • How to add 'load more' functionality to items on a…
  • Using IS NULL or IS NOT NULL on join conditions -…
  • Show/hide 'div' using JavaScript
  • What is causing this broken animation/transition in…
  • center images with each other in logo carousel
  • Polymer 1.0 Trying to make a splitter which works…
  • Keeping the User logged in
  • Do not close the mode in the mouse up event
  • Positioned element is off when on Safari`
  • CSS3 scrollbar styling on a div
  • How to handle initializing and rendering subviews in…
  • "Non-resolvable parent POM: Could not transfer…
  • Javascript validate all checkboxes are selected
  • Fix top buttons on scroll of list below
  • Why do we assign a parent reference to the child…
  • :last-child not working as expected?
  • Navbar not filling width of page when reduced to mobile view
  • CSS Input with width: 100% goes outside parent's bound
  • Not submit any value if checkbox is empty
  • if statement is executed while condition is false
  • How do you easily create empty matrices javascript?
  • how to integrate selenium driver for chrome and…
  • How to change the scrollbar color using css
  • How to style child components from parent…
  • Reset/remove CSS styles for element only
  • Selenium using Java - The path to the driver…
  • Can I modify Vue.js VNodes?
  • VueJS masonry layout
  • Show div on scrollDown after 800px
  • Change a HTML5 input's placeholder color with CSS
  • AppCompat v7 r21 returning error in values.xml?
  • How to vertically center a container in Bootstrap?
  • Using Shadow Dom CSS Animations on distributed…
  • How to center an element horizontally and vertically
  • nesting elements and dynamic content inside…
  • Use mobile scrollbar in Polymer
  • Backbone.js - Should nested Views maintain…
  • Why doesn't the height of a container element…
  • How to detect Safari, Chrome, IE, Firefox and Opera browser?
  • CSS - Overflow: Scroll; - Always show vertical scroll bar?
  • JavaScript Code not running on a Live Sever nor Local Host
  • How to create a game over screen for a basic HTML/JS game?
  • Full-screen iframe with a height of 100%
  • Layout doesn't expand more than initial size it was…
  • CSS Variable trough Polymer (dynamically loaded) elements
  • Form field border-radius is not working only on the…
  • Vue.js - prop sync not instant
  • `white-space: nowrap` inside flex container only…
  • CSS animate a conical gradient as border image
  • center 3 items on 2 lines
  • Missing visible-** and hidden-** in Bootstrap v4
  • When tab is selected, show next tab.. if last tab…
  • Using Auto Layout in UITableView for dynamic cell…
  • Triggering text area by clicking related select/checkbox
  • Use latest version of Internet Explorer in the…
  • Vertically align an image inside a div with…
  • How is compiler inferring type on a generic method?
  • Flutter - Cubit - loaded state - managing…
  • How do I expand the output display to see more…
  • Using CSS for a fade-in effect on page load
  • Vertical Align Center in Bootstrap 4
  • How to downgrade from Internet Explorer 11 to…
  • Usage of __slots__?
  • Manually adding a Userscript to Google Chrome
  • Playing HTML5 video on fullscreen in android webview
  • Smart way to truncate long strings
  • How to filter a RecyclerView with a SearchView
  • Android : Fragment doesn't fit into Fragment Container
  • Access component data in other component using slots…
  • What is WebKit and how is it related to CSS?
  • Flutter web tabbar scroll issue with non primary…
  • How to specify line breaks in a multi-line flexbox layout?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to get the current branch name in Git?

Next Post:

How can I prevent SQL injection in PHP?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error