Как я могу отключить браузер или полосу прокрутки элемента, но все же разрешить прокрутку с помощью колесика или клавиш со стрелками?
Я хочу скрыть любые полосы прокрутки от моего div элементы и мое целое body, но все же позволяйте пользователю прокручивать колесико мыши или клавиши со стрелками. Как этого можно достичь с помощью необработанного JavaScript или jQuery? Есть идеи?
7 ответов
Как и предыдущие ответы, вы бы использовали overflow:hidden отключить полосы прокрутки на теле / div.
Тогда вы бы связать mousewheel событие в функцию, которая изменит scrollTop div, чтобы подражать прокрутке.
Для клавиш со стрелками, вы должны связать keydown событие, чтобы распознать клавишу со стрелкой, а затем изменить scrollTop а также scrollLeft деления в зависимости от обстоятельств для имитации прокрутки.
(Примечание: вы используете keydown вместо keypress поскольку IE не распознает keypress для клавиш со стрелками.)
Изменить: я не мог заставить 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
плагин колесика мыши
keydown, нажатие клавиши @ quirksmode
Обновление 19.12.2012:
Обновленное местоположение плагина mousewheel: https://github.com/brandonaaron/jquery-mousewheel
А как насчет чисто 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>
Вам не нужно использовать jquery или js, чтобы сделать это. Это более производительный с простым webkit.
Просто добавьте приведенный ниже код в ваш файл CSS.
::-webkit-scrollbar {
display: none;
}
Осторожно! Это отключит все полосы прокрутки, поэтому обязательно поместите их в определенный класс или идентификатор, если вы просто хотите, чтобы он был скрыт.
Я предпочитаю ответ SamGoody, предоставленный дубликату этого вопроса. Он оставляет нетронутыми собственные эффекты прокрутки, вместо того, чтобы пытаться вручную повторно реализовать несколько конкретных устройств ввода:
Лучшее решение - установить для целевого элемента div значение overflow: scroll и обернуть его во второй элемент, который на 8px уже, который переполняется: скрытый.
Смотрите оригинальный комментарий для подробного примера. Возможно, вы захотите использовать JavaScript для определения фактического размера полос прокрутки, а не предполагать, что они всегда имеют ширину 8 пикселей, как в его примере.
Чтобы это работало на меня, я использовал этот 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));
});
Как сказал выше Балдрани
::-webkit-scrollbar { display: none; }
Или вы можете сделать
::-webkit-scrollbar{ width: 0px; }
(опубликовано для других людей, которые наткнулись на это из поиска Google!)
Ну, возможно, не самый интуитивный, на мой взгляд, но я могу представить, что вы можете сделать это достойным опытом, попробуйте.
overflow:hidden;
убедитесь, что родительский объект имеет height а также widthи отображается как block