it-swarm.com.ru

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

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

51
Shizoman

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

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

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

Например, прокрутка с помощью колесика мыши (с использованием 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
плагин колесика мыши
нажатие клавиши, нажатие клавиши @ quirksmode

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

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

47
Grace

А как насчет чисто 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>
11
Peter Gordon

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

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

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

7
natevw

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

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

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

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

7
Baldráni

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

Как Baldráni сказал выше

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

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

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


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

0
DardanM