Можно ли изменить скорость прокрутки с помощью CSS или jQuery?
Проблема: Как уменьшить скорость прокрутки содержимого div при использовании колеса мыши
В приведенном ниже примере я хотел бы уменьшить скорость прокрутки содержимого div, особенно при использовании колеса мыши, так как одно щелчок колеса прокручивает приблизительно на высоту самого div.
Возможно ли контролировать это с помощью CSS? Если нет, то можно ли сделать это с помощью JavaScript (возможно, с использованием jQuery)?
.scrollable {
width: 500px;
height: 70px;
overflow: auto;
}
<div class="scrollable">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
Примечание: Я понимаю, что скорость прокрутки может различаться в зависимости от ОС/браузеров и их настроек. Однако я считаю, что в большинстве случаев скорость прокрутки (при использовании колеса мыши) слишком быстрая, поэтому я хотел бы ее замедлить.
4 ответ(ов)
Событие прокрутки мыши можно переопределить с помощью JavaScript внутри браузера, используя слушатели событий. Таким образом, вы можете предотвратить стандартное поведение прокрутки и реализовать свое собственное (см. ответ cssyphus).
Тем не менее, я считаю, что такая практика — это УЖАСНАЯ идея с точки зрения удобства использования, доступности и уважения к вашим пользователям.
Ваша функция на чистом JavaScript, основанная на приведенном коде, выглядит отлично! Ниже привожу перевод на русский в стиле ответа на StackOverflow.
Вы можете использовать следующий код, который не зависит от jQuery и полностью реализован на JavaScript. Он перехватывает события прокрутки колеса мыши и анимирует прокрутку страницы.
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
function wheel(event) {
var delta = 0;
if (event.wheelDelta) {
delta = (event.wheelDelta) / 120;
} else if (event.detail) {
delta = -(event.detail) / 3;
}
handle(delta);
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
function handle(sentido) {
var inicial = document.body.scrollTop;
var time = 1000; // Длительность анимации в миллисекундах
var distance = 200; // Расстояние прокрутки
animate({
delay: 0,
duration: time,
delta: function(p) { return p; },
step: function(delta) {
window.scrollTo(0, inicial - distance * delta * sentido);
}
});
}
function animate(opts) {
var start = new Date();
var id = setInterval(function() {
var timePassed = new Date() - start;
var progress = (timePassed / opts.duration);
if (progress > 1) {
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1) {
clearInterval(id);
}
}, opts.delay || 10);
}
Этот код использует события DOMMouseScroll
и onmousewheel
, чтобы определить направление прокрутки. Функция handle
инициирует анимацию прокрутки, а сама анимация реализована в методе animate
, который плавно изменяет положение прокрутки.
Вы можете протестировать свою реализацию на jsbin. Если у вас возникнут дополнительные вопросы или проблемы, дайте знать!
Вот краткое и простое решение на чистом JavaScript для изменения скорости/шагов прокрутки (deltaY):
let custom_scroll = document.getElementById('custom-scroll');
let scroll_timeout = undefined;
let ratio = 0.25; // Измените это значение, чтобы увеличить или уменьшить скорость прокрутки
custom_scroll.addEventListener("wheel", (event) => {
event.preventDefault();
clearTimeout(scroll_timeout); // Очищаем таймер, чтобы избежать бесконечной прокрутки
let target = custom_scroll.scrollTop + event.deltaY * ratio;
let step = target > custom_scroll.scrollTop ? 1 : -1;
let frame = () => {
custom_scroll.scrollTop += step;
if ((target < custom_scroll.scrollTop && step < 0) || (target > custom_scroll.scrollTop && step > 0)) {
scroll_timeout = setTimeout(frame, 5);
}
}
frame();
});
// Или еще более короткая версия:
let custom_scroll_short = document.getElementById('custom-scroll-short');
custom_scroll_short.addEventListener("wheel", (event) => {
event.preventDefault();
let target = custom_scroll_short.scrollTop + event.deltaY * ratio;
custom_scroll_short.scrollTo({
top: target,
behavior: "smooth"
});
});
#custom-scroll, #custom-scroll-short {
width: 200px;
height: 100px;
background-color: gray;
overflow-y: scroll;
margin: 50px;
}
<div id="custom-scroll">
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
</div>
<div id="custom-scroll-short">
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
<p>Item</p>
</div>
В этом примере вы можете изменить значение переменной ratio
, чтобы настроить скорость прокрутки. При прокрутке колесиком мыши область с прокруткой будет двигаться плавно.
В дополнение к предыдущим ответам, важно также обратить внимание на следующую часть оригинального вопроса:
"Возможно ли ... сделать это с помощью CSS?"
Поведение (авто)прокрутки можно установить на 'smooth', но скорость прокрутки задается браузером.
html { scroll-behavior: smooth; }
В этом случае, к сожалению, ответ - нет: скорость плавной прокрутки невозможно задать или изменить с помощью CSS. Это свойство управляется браузером.
Например, в Firefox вы можете поэкспериментировать с параметрами и значениями general.smoothScroll
в браузерной вкладке about:config
, но будьте осторожны и не изменяйте другие важные настройки, которые могут там находиться.
Прокрутка к элементу с использованием jQuery
Как убрать кнопку закрытия в диалоговом окне jQuery UI?
Удаление нескольких классов (jQuery)
Как получить размеры фонового изображения в jQuery?
Установить значение по умолчанию в выпадающем списке с помощью jQuery