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

Ответ 1

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

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

... и покажите это следующим образом:

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

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

Ответ 2

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

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

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

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

Ответ 3

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

overflow: hidden;

или

someElement.style.overflow = 'hidden';

Ответ 4

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

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

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

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

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

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

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

Ответ 5

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

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

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

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

Ответ 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>

Ответ 7

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

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

Источник

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

Ответ 8

У меня болит глаза, когда я читаю ваш вопрос. Однако невозможно скрыть панель прокрутки браузера без установки "overflow: hidden" (!). Это поведение браузера по умолчанию.

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