Hide scrollbar with css not working on chrome

Question

I'm trying to hide the scrollbar with css but it works on firefox but in Chrome the scrollbar is still there

.tests-container{
    @media (min-width: 1025px) {
        max-height: 600px;
        overflow-y: scroll;
        :-webkit-scrollbar{
            display: none;
        }
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
}

hungdoansy · Accepted Answer · 2020-11-21 05:04:57Z

1

I haven't seen a media query inside a class, so I'll change to this

@media (min-width: 1025px) {
  .tests-container {
      max-height: 600px;
      /* overflow-y: scroll; */

      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }
  
  .tests-container::-webkit-scrollbar {
    display: none;
  }
}

answered Nov 21, 2020 at 5:04

hungdoansy

4864 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hungdoansy Over a year ago

I made an example here codepen.io/dshung1997/pen/MWeMOYB. It worked fine on my laptop, Chrome MacOS

Collectives™ on Stack Overflow

Hide scrollbar with css not working on chrome

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related