it-swarm.com.ru

Как скрыть полосу прокрутки с помощью JavaScript

Как можно скрыть полосу прокрутки? Я хочу сделать это, потому что полоса прокрутки не приятно.

overflow:hidden бесполезен, потому что мой элемент div имеет много других элементов.

Поэтому установка overflow не решает мою проблему.

23
zjm1126

Вы можете скрыть полосу прокрутки с этим ...

document.body.style.overflow = 'hidden';

... и показать это с этим:

document.body.style.overflow = 'visible';

Тем не менее, вы должны спросить себя, действительно ли это то, что вы хотите. Полосы прокрутки появляются для того, чтобы люди могли видеть то, что находится за пределами их маленьких экранов.

24
Whakkee

Вы должны перезаписать настройки CSS следующим образом:

<style type="text/css">
    #YourSpecialDiv { overflow: hidden !important; }
</style>

И в div вы должны добавить тег id, т.е.

<div id="YourSpecialDiv"...>...</div>
5
HGMamaci

Я не думаю, что на самом деле есть способ просто правильно скрыть полосы прокрутки .. То, что делают overflow:hidden, overflow-x:hidden и overflow-y:hidden, на самом деле "если оно выходит за пределы 100vw/100vh/100vw и 100vh, то не отображать его". Переполнение только не отображает то, что находится за пределами текущего (начального tbh) представления.

Он скрывает полосу прокрутки, потому что все, что находится в HTML, и должно быть снаружи, не будет отображаться на странице при просмотре (ничего не требует прокрутки, поэтому нет полосы прокрутки).

Единственное доступное скрытие (здесь, чтобы скрыть полосу прокрутки оси Y):

[container]{
    overflow:scroll;
    overflow-x:hidden;
}

[container]::-webkit-scrollbar{
    width:0;
    background-color:transparent;
}

Который представляет собой настоящую скрытую полосу прокрутки и, к сожалению, работает только в браузерах, основанных на webkit.

Если однажды все производители примут это, то это будет удивительно, и мы наконец сможем скрыть полосы прокрутки.

2
Voltra Neo

Вы можете использовать следующее на любом элементе:

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

Источник

Это работает только в браузерах webkit, поэтому нет IE и Firefox.

2
Marouane Er-rouhi

Вы должны использовать свойство CSS overflow, которое «управляет» тем, что должно произойти, когда содержимое определенного элемента выходит за его границы. Установка hidden скрывает полосы прокрутки.

overflow: hidden;

или же

someElement.style.overflow = 'hidden';
1
Douwe Maan

var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
  /*Mouse wheel scrolled down*/
  if (event.deltaY > 0)
    container.scrollTop += 30;

  /*Mouse wheel scrolled up*/
  else
    container.scrollTop -= 30;
}, false);
div.container {
  height: 15rem;
  width: 20rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid;
  font-family: "Seoge UI", "Calibri", sans-serif;
  font-size: 1.25rem;
  line-height: 1.5rem;
}
<div class="container">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span>  Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
  Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
  dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
  />diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
  />libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
  />Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>

0
Usama Ansari

Лучший способ сделать это - использовать некий псевдоэлемент css. Но я думаю, что только для webkit (Chrome/Safari) есть один для полосы прокрутки , поэтому он не очень кроссбраузерен.

Хакерская альтернатива - заключить ее в элемент div, который скрывает полосу прокрутки, установив width меньше, чем содержащийся div, на размер полосы прокрутки.

DEMO (может потребоваться некоторое время, чтобы сделать CSS идеальным, но вы получите Gist)

Проблема здесь в том, что размеры полосы прокрутки различаются для разных браузеров, поэтому вам придется сделать внешний делитель наибольшим из ширины полосы прокрутки меньше. И чтобы не обрезать контент в браузерах с помощью меньших полос прокрутки, было бы лучше добавить отступы наибольшей разницы в размерах для полос прокрутки.

0
Hashbrown