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

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

ОТВЕТЫ

Ответ 1

Как и предыдущие ответы, вы должны использовать overflow:hidden для отключения полос прокрутки на теле /​​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>

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

ссылка keyCode
плагин mousewheel
keydown, keypress @quirksmode

Обновление 12/19/2012:

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

Ответ 2

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

Решение 1 (кросс-браузер, но более хакерский)

<html>
  <head>
    <style type="text/css">
      #div {position: fixed; bottom: 60px; left: 20px; right: -20px; padding-right: 40px; top: 80px; background-color: black; color: white; overflow-y: scroll; overflow-x: hidden;}
    </style>
  </head>
  <body>
    <div id="div">
      Scrolling div with hidden scrollbars!
      On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.
    </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, если установлен) и имеет < Ниже приведена демонстрационная версия href= "http://noraesae.github.io/perfect-scrollbar/" rel= "nofollow noreferrer" > . Компоненты могут быть в стиле 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>

Ответ 3

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

Лучшим решением является установка целевого div на переполнение: прокрутка и перенос его во второй элемент, который на 8px уже, кто переполняется: hidden.

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

Ответ 4

Вам не нужно использовать jquery или js, чтобы сделать это. Его более эффективный с простым webkit.

Просто добавьте код в свой файл css.

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

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

Ответ 5

Чтобы заставить это работать для меня, я использовал этот 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));
});

Ответ 6

Как Baldráni, упомянутый выше

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

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

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


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

Ответ 7

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

overflow:hidden;

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