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

Question

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

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

Таким образом, установка overflow не решает мою проблему.

Answer 1

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

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

Источник

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

Answer 4

Не думаю, что на самом деле есть способ просто правильно скрыть полосы прокрутки. То, что 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.

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

Answer 5

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

overflow: hidden;

или

someElement.style.overflow = 'hidden';

Answer 6

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>

Answer 7

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

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

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

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

Answer 8

Мои глаза болят, когда я читаю ваш вопрос.Однако невозможно скрыть полосу прокрутки браузера без настройки «переполнение: скрыто» (?!).Это поведение браузера по умолчанию.

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