Как я могу удалить полосу прокрутки, но все же разрешить прокрутку с помощью мыши? - PullRequest
Новая
       11

Как я могу удалить полосу прокрутки, но все же разрешить прокрутку с помощью мыши?

1 голос
/ 07 апреля 2020

На моем сайте я использую гладкую карусель, которая позволяет очень просто создать div, который можно прокручивать мышью без видимой полосы прокрутки. Тем не менее, у меня есть другой div, для которого я не могу использовать плагин Slick, и я пытаюсь сделать так, чтобы он работал так же, как Slick Carousel.

Кто-нибудь знает, есть ли класс, который использует slick, чтобы сделать div прокручиваемым с помощью мыши без видимой полосы прокрутки, который я могу добавить к другому div?

Например, это div, использующий гладкую карусель, которая прокручивается мышью без полосы прокрутки 

<div class='col-sm-10 carousel1 d-flex align-items-center'>
        <div class='content'>
          <img src='assets/item1.png'>
        </div>
        <div class='content'>
          <img src='assets/item2.png'>
        </div>
        <div class='content'>
          <img src='assets/item3.png'>
        </div>
        <div class='content'>
          <img src='assets/item4.png'>
        </div>
        <div class='content'>
          <img src='assets/item5.png'>
        </div>
        <div class='content'>
          <img src='assets/item6.png'>
        </div>
        <div class='content'>
          <img src='assets/item7.png'>
        </div>  
      </div>

Как я могу использовать скользкие файлы, чтобы добавить ту же функциональность к другому div, чтобы его можно было прокручивать мышью без полосы прокрутки? 

<div class='container'>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
</div>

Еще одна вещь, которую, надеюсь, может объяснить кто-то более умный, чем я: когда я go на Chrome разрабатываю инструменты и выбираю режим реагирования на телефоне или ноутбуке с сенсорным экраном, он работает и прокручивается с помощью мыши, однако, если я переключаюсь обратно на ноутбук, мне приходится снова использовать полосу прокрутки.

1 Ответ

1 голос
/ 08 апреля 2020

Простейший ответ такой (просто измените «тело» для любого класса): 

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

И если вы хотите, чтобы полоса прокрутки была видимой, вы можете изменить цвета следующим образом: 

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Теперь, если вы хотите сохранить ширину полосы прокрутки как есть, но сделать полосы прокрутки прозрачными (это еще один прием), просто замените цвета выше прозрачностью: 

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  outline: 1px solid rgba(0, 0, 0, 0);
}
...