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

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

52 голосов
/ 25 августа 2009

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

Ответы [ 7 ]

47 голосов
/ 25 августа 2009

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

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

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

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

<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>

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

код ссылки на код
плагин колесика мыши
нажатие клавиши, нажатие клавиши @ quirksmode

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

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

11 голосов
/ 21 ноября 2012

А как насчет чисто 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>
7 голосов
/ 28 апреля 2015

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

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

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

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

7 голосов
/ 22 мая 2012

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

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

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

4 голосов
/ 05 марта 2011

Чтобы это сработало, я использовал этот 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));
});
0 голосов
/ 27 мая 2015

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

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

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

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


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

0 голосов
/ 25 августа 2009

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

overflow:hidden;

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...