Hide scroll bar, but while still being able to scroll

前端 未结 30 3396
悲哀的现实
悲哀的现实 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条回答
  • 2020-11-21 04:58

    Another simple working fiddle:

    #maincontainer {
        background: orange;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    
    #childcontainer {
        background: yellow;
        position: relative;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 20px;
        overflow: auto;
    }
    

    Overflow hidden on the parent container, and overflow auto on the child container. Simple.

    0 讨论(0)
  • 2020-11-21 05:00

    This works for me with simple CSS properties:

    .container {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .container::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
    

    For older versions of Firefox, use: overflow: -moz-scrollbars-none;

    0 讨论(0)
  • 2020-11-21 05:00

    This will be at the body:

    <div id="maincontainer" >
    <div id="child">this is the 1st step</div>
    <div id="child">this is the 2nd step</div>
    <div id="child">this is the 3rd step</div>
    

    And this is the CSS:

    #maincontainer
    {
        background: grey;
        width: 101%;
        height: 101%;
        overflow: auto;
        position: fixed;
    }
    
    #child
    {
        background: white;
        height:500px;
    }
    
    0 讨论(0)
  • 2020-11-21 05:02

    As of December 11th 2018 (Firefox 64 and above), the answer to this question is very simple indeed as Firefox 64+ now implements the CSS Scrollbar Styling spec.

    Just use the following CSS:

    scrollbar-width: none;
    

    Firefox 64 release note link here.

    0 讨论(0)
  • 2020-11-21 05:02

    Another sort of hacky approach is to do overflow-y: hidden and then manually scroll the element with something like this:

    function detectMouseWheelDirection(e) {
      var delta = null, direction = false;
      if (!e) { // If the event is not provided, we get it from the window object
        e = window.event;
      }
      if (e.wheelDelta) { // Will work in most cases
        delta = e.wheelDelta / 60;
      } else if (e.detail) { // Fallback for Firefox
        delta = -e.detail / 2;
      }
      if (delta !== null) {
        direction = delta > 0 ? -200 : 200;
      }
      return direction;
    }
    
    if (element.addEventListener) {
      element.addEventListener('DOMMouseScroll', function(e) {
        element.scrollBy({
          top: detectMouseWheelDirection(e),
          left: 0,
          behavior: 'smooth'
        });
      });
    }
    

    There's a great article about how to detect and deal with onmousewheel events in deepmikoto's blog. This might work for you, but it is definitively not an elegant solution.

    0 讨论(0)
  • 2020-11-21 05:04

    Use

    function reloadScrollBars() {
        document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
        document.body.scroll = "yes"; // Internet Explorer only
    }
    
    function unloadScrollBars() {
        document.documentElement.style.overflow = 'hidden';  // firefox, chrome
        document.body.scroll = "no"; // Internet Explorer only
    }
    

    Call these functions for any point you want to load or unload or reload the scrollbars. It is still scrollable in Chrome as I tested it in Chrome, but I am not sure of the other browsers.

    0 讨论(0)
提交回复
热议问题