Hide scroll bar, but while still being able to scroll

前端 未结 30 3283
悲哀的现实
悲哀的现实 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条回答
  •  慢半拍i
    慢半拍i (楼主)
    2020-11-21 04:51

    This answer doesn't include the code, so here is the solution from page:

    According to the page this approach doesn't need to know the width of the scrollbar ahead of time in order to work and the solution works for all browsers too, and can be seen here.

    The good thing is that you are not forced to use padding or width differences to hide the scrollbar.

    This is also zoom safe. Padding/width solutions show the scrollbar when zoomed to minimum.

    Firefox fix: http://jsbin.com/mugiqoveko/1/edit?output

    .element,
    .outer-container {
      width: 200px;
      height: 200px;
    }
    .outer-container {
      border: 5px solid purple;
      position: relative;
      overflow: hidden;
    }
    .inner-container {
      position: absolute;
      left: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      padding-right: 150px;
    }
    .inner-container::-webkit-scrollbar {
      display: none;
    }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.

提交回复
热议问题