skip to Main Content

I want to hide the scrollbar, without disabling scrolling

I used this rule in CSS:

::-webkit-scrollbar {
  display: none;
}

I’ve tried also with :

::-webkit-scrollbar {
  width: 0;
}

From PC, it works correctly, on mobile, regardless of the browser, I’ve tried both with Safari and Chrome, it does not work.

2

Answers


  1. /* You can adjust your break point on the width to say when you want it visible */
    
    @media screen and (max-width: 767px) {
      body {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      body::-webkit-scrollbar {
        display: none;
      }
    }
    
    .test {
      height: 1000px;
    }
    <body>
      <div class='test'>
        This div has a height of 1000px, you can scroll and the scrollbar is hidden.
      </div>
    </body>
    Login or Signup to reply.
  2. In addition to the above answer by KnightTheLion, for anyone who finds this question and uses LESS, you can use mixins for convinience:

    // LESS media query mixin template
    
    @screen-phone: 767px;
    @screen-tablet: 922px;
    @screen-desktop: 1200px;
    
    .media-phone(@rules) {
      @media screen and (max-width: @screen-phone) {
        @rules();
      }
    }
    
    .media-tablet(@rules) {
      @media screen and (min-width: (@screen-phone + 1px)) and (max-width: (@screen-desktop - 1px)) {
        @rules();
      }
    }
    
    .media-desktop(@rules) {
      @media screen and (min-width: @screen-desktop) {
        @rules();
      }
    }
    
    .media-custom-max(@width, @rules) {
      @media screen and (max-width: @width) {
        @rules();
      }
    }
    
    .media-custom-min(@width, @rules) {
      @media screen and (min-width: @width) {
        @rules();
      }
    }
    
    // gt=greater than
    .media-gt-phone(@rules) {
      @media (min-width: (@screen-phone + 1px)) {
        @rules();
      }
    }
    
    .media-gt-tablet(@rules) {
      @media (min-width: (@screen-tablet + 1px)) {
        @rules();
      }
    }
    

    Here’s an example in usage:

    body {
      .media-phone ({
        scrollbar-width: none;
        -ms-overflow-style: none;
      });
    
    }
    body::-webkit-scrollbar {
      .media-phone ({
      display: none;
      });
    }
    

    You can always add more mixins and edit existing ones to account for wider screens and more.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search