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

Я хочу скрыть любые полосы прокрутки в моих div элементах и ​​во всем моем body, но по-прежнему позволяю пользователю прокручивать с помощью колесика мыши или клавиш со стрелками. Как этого добиться с помощью необработанного JavaScript или jQuery? Любые идеи?


javascript browser jquery css scrollbar
person Shizoman    schedule 25.08.2009    source источник
comment
Я ответил то же самое здесь, по этой ссылке. Надеюсь, это будет кому-то полезно.   -  person Mr_Green    schedule 17.06.2014
comment
github.com/lsvx/hide-bars   -  person davidcondrey    schedule 07.07.2014

Ответы (7)


arrow_upward
50
arrow_downward

Как и в предыдущих ответах, вы должны использовать overflow:hidden, чтобы отключить полосы прокрутки в body / div.

Затем вы должны привязать событие mousewheel к функции, которая изменяет scrollTop элемента div для имитации прокрутки.

Для клавиш со стрелками вы должны привязать событие keydown для распознавания клавиши со стрелкой, а затем изменить scrollTop и scrollLeft в div для имитации прокрутки. (Примечание: вы используете keydown вместо keypress, поскольку IE не распознает keypress для клавиш со стрелками.)
Изменить: Мне не удалось заставить FF / Chrome распознавать keydown в div, но он работает в IE8. В зависимости от того, для чего вам это нужно, вы можете установить прослушиватель keydown на document для прокрутки div. (В качестве примера посмотрите ссылку на keyCode.)

Например, прокрутка колесиком мыши (с использованием jQuery и плагина mousewheel):

<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>

<script>
$("#example").bind("mousewheel",function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta));
});
</script>

(Это быстрый макет, вам придется отрегулировать числа, поскольку для меня это прокручивается немного медленно.)

справочник по коду ключа
плагин колесика мыши
keydown , keypress @ quirksmode

Обновление 19.12.2012:

Обновленное расположение плагина колесика мыши: https://github.com/brandonaaron/jquery-mousewheel

person Grace    schedule 25.08.2009
comment
У меня проблемы с тем, чтобы это работало, если вы хотите скрыть полосы прокрутки на ТЕЛЕ, а затем привязать колесо мыши к прокрутке тела. - person David B; 19.12.2012
comment
@DavidBarnes хм, похоже, многие вещи устарели за 3 года. Мне пришлось получить обновленный плагин колесика мыши с github, и чтобы прокрутка работала, мне пришлось привязать к документу вместо тела. вот мой пример: pastebin.com/U08b6MCx - person Grace; 19.12.2012
comment
комментарий от @radry: Решение, предложенное в верхнем ответе, больше не работает, даже комментарий к обновлению. По крайней мере, мое колесо мыши ничего не делает. Как решить эту проблему в 2014 году? - person Taifun; 13.09.2014

arrow_upward
11
arrow_downward

А как насчет чисто CSS-решения? Я проверил это, и он отлично работает. Однако я бы порекомендовал Решение 3, поскольку оно не является взломанным, оно поддерживается всеми браузерами с JS и очень просто.

Решение 1 (кроссбраузерность, но более хакерская)

#div {
  position: fixed;
  right: -20px;
  left: 20px;
  background-color: black;
  color: white;
  height: 5em;
  overflow-y: scroll;
  overflow-x: hidden;
}
<html>

<body>
  <div id="div">
    Scrolling div with hidden scrollbars!<br/>
    On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
    Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
  </div>
</body>

</html>

Решение 2 (только IE и Chrome)

Просто добавьте класс nobars к любому элементу, на котором вы хотите скрыть полосы прокрутки.

Firefox overflow: -moz-scrollbars-none, согласно MDN, устарел. Раньше он работал, но теперь скрывает переполнение и отключает прокрутку, если используется.

.nobars {
    /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /* overflow: -moz-scrollbars-none; (no longer works) */
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

Решение 3 (кроссбраузерный JavaScript)

Perfect Scrollbar не требует jQuery (хотя он может использовать jQuery если он установлен) и имеет демонстрационную версию, доступную здесь. Компоненты могут быть стилизованы с помощью css, как в следующем примере:

.ps-scrollbar-y-rail {
  display: none !important;
}

Вот полный пример, включающий реализацию Perfect Scrollbar:

<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: scroll;
  }
  .ps-scrollbar-y-rail {
    display: none !important;
  }
</style>
<script src='js/perfect-scrollbar.min.js'></script>

<div id="container">
  Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>

<script>
  // on dom ready...
  var container = document.getElementById("container");
  Ps.initialize(container);
  //Ps.update(container);
  //Ps.destroy(container);
</script>
person Peter Gordon    schedule 21.11.2012
comment
Я понимаю что ты имеешь ввиду. Вы можете создать фон позади него отдельно, чтобы решить эту проблему и сделать его такого же размера, как у прокручиваемого ‹div›. - person Peter Gordon; 03.12.2012
comment
Похоже, -moz-scrollbars-none на самом деле отключает прокрутку. Или есть способ как-то совместить с overflow:auto? - person phreakhead; 10.12.2016
comment
Раньше это работало, по-видимому, это уже не так. Похоже, Javascript - единственный вариант, пока он не будет добавлен в Firefox :( - person Peter Gordon; 10.12.2016
comment
@phreakhead Добавлен третий метод, который полагается на JS, но не на jQuery. Другие решения могут быть полезны в некоторых случаях. - person Peter Gordon; 10.12.2016

arrow_upward
8
arrow_downward

Для этого не обязательно использовать jquery или js. Он более эффективен с простым webkit.

Просто добавьте приведенный ниже код в свой файл css.

::-webkit-scrollbar { 
    display: none; 
}

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

person Baldráni    schedule 28.04.2015
comment
Да, но в других браузерах это не работает. Насколько мне известно, в настоящее время только браузеры webkit позволяют настраивать полосы прокрутки. Вы знаете подобное кроссбраузерное решение? - person The Light Sabrix; 10.08.2015
comment
@TheLightSabrix, возможно, вас заинтересует мой ответ на IE, Chrome и Firefox выше (см. Решение 2). Я не стал исследовать какие-либо другие браузеры, прокомментируйте, если вы хотите, чтобы я попробовал какой-либо конкретный. - person Peter Gordon; 22.06.2016

arrow_upward
7
arrow_downward

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

Лучшее решение - установить для целевого div значение overflow: scroll и обернуть его во второй элемент, который на 8 пикселей уже, who's overflow: hidden.

См. Более подробный пример в исходном комментарии. Вы можете использовать JavaScript, чтобы определять фактический размер полос прокрутки, а не предполагать они всегда имеют ширину 8 пикселей, как в его примере.

person natevw    schedule 22.05.2012
comment
Отличное предложение, но не для Mac, так как у них нет полос прокрутки - person dr.dimitru; 28.11.2015

arrow_upward
4
arrow_downward

Чтобы это работало для меня, я использовал этот CSS:

html { overflow-y: hidden; }

Но у меня были проблемы с использованием $(this).scrollTop(), поэтому я привязал к своему #id, но скорректировал scrollTop окна. Кроме того, моя мышь с плавной прокруткой выстреливала много дельт в 1 или -1, поэтому я умножил это на 20.

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
person Kevin Hakanson    schedule 05.03.2011
comment
Потрясающий. В моем случае это было overflow-x: hidden, что мне было нужно. Спасибо! - person Edward Anderson; 29.09.2012

arrow_upward
0
arrow_downward

Как сказал Балдрани выше

::-webkit-scrollbar { display: none; }

Или ты можешь сделать

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


(опубликовано для других людей, которые наткнулись на это при поиске в Google!)

person DardanM    schedule 27.05.2015

arrow_upward
-4
arrow_downward

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

overflow:hidden;

убедитесь, что родительский объект имеет height и width и отображается как block

person JP Silvashy    schedule 25.08.2009