Я разрабатываю сайт прокрутки параллакса, используя библиотеки Stellar и Skrollr. Веб-сайт отлично работает в Firefox из-за плавной прокрутки Firefox, но в Chrome прокрутка с колесиком мыши является отрывистым, и эффект параллакса почти разрушен. Есть ли способ получить гладкую прокрутку с колесом мыши во всех браузерах при сохранении производительности?
Включить плавную прокрутку для моего веб-сайта во всех браузерах
Ответ 1
Я нашел два плагина jQuery, которые могут делать то, что вы хотите.
Simplr-SmoothScroll//Источник: Вопрос SE
Надеюсь, что это поможет.
edit: вычеркнул SmoothWheel из-за комментариев - он не обновлялся в возрасте, а SmoothScroll выглядит в хорошем состоянии.
Ответ 2
Если вы культовый программист, перейдите к jQuery. Продолжайте, только если вы Реальный программист.
Screw jQuery.animate(), понять математику и выбрать алгоритм. Роберт Пеннер имеет приятную демонстрацию, я выбрал EaseOutQuad.
Прочитайте, как обрабатывать кросс-браузерный стиль колесика мыши здесь, затем сделайте больше чтения.
В этом коде я предпочитаю не поддерживать IE 8 и старше. Идея состоит в том, чтобы подключить событие колеса, предотвратить его (поскольку поведение по умолчанию - резкий переход) и выполнить собственный плавный переход
Math.easeOutQuad = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };
(function() { // do not mess global space
var
interval, // scroll is being eased
mult = 0, // how fast do we scroll
dir = 0, // 1 = scroll down, -1 = scroll up
steps = 50, // how many steps in animation
length = 30; // how long to animate
function MouseWheelHandler(e) {
e.preventDefault(); // prevent default browser scroll
clearInterval(interval); // cancel previous animation
++mult; // we are going to scroll faster
var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // cross-browser
if(dir!=delta) { // scroll direction changed
mult = 1; // start slowly
dir = delta;
}
// in this cycle, we determine which element to scroll
for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) {
var oldScroll = tgt.scrollTop;
tgt.scrollTop+= delta;
if(oldScroll!=tgt.scrollTop) break;
// else the element can't be scrolled, try its parent in next iteration
}
var start = tgt.scrollTop;
var end = start + length*mult*delta; // where to end the scroll
var change = end - start; // base change in one step
var step = 0; // current step
interval = setInterval(function() {
var pos = Math.easeOutQuad(step++,start,change,steps); // calculate next step
tgt.scrollTop = pos; // scroll the target to next step
if(step>=steps) { // scroll finished without speed up - stop animation
mult = 0; // next scroll will start slowly
clearInterval(interval);
}
},10);
}
// nonstandard: Chrome, IE, Opera, Safari
window.addEventListener("mousewheel", MouseWheelHandler, false);
// nonstandard: Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
})();
Как вы можете видеть в этой демонстрации, я предпочитаю как можно меньше облегчать, просто чтобы избежать отрывистой прокрутки. Прочитайте комментарии выше и создайте собственную прокрутку, которая соответствует вашему проекту.
Примечание: колесико мыши также подключается к тачпаду, но не к кнопкам вверх/вниз. Вы должны также подумать о том, чтобы перехватить ключевые события.
Ответ 3
У меня не было много времени, но я попытался на лету написать (кросс-браузер и грязную) плавную функциональность прокрутки. Когда вы прекращаете прокрутку, он плавно замедляется. Вы можете переписать его немного, чтобы он соответствовал вашим потребностям.
Попробуйте здесь:
Плавная прокрутка:
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
//most browsers except IE before #9
return pageYOffset;
} else {
var B = document.body; //IE 'quirks'
var D = document.documentElement; //IE with doctype
D = (D.clientHeight) ? D : B;
return D.scrollTop;
}
}
var timeouts = [];
var scrolling = false;
var scroller;
var scrollTop = getScrollTop();
var timeMs;
var alter = false;
var speed = 5;
window.onscroll = function() {
if(alter) {
var timeDif = new Date().getMilliseconds() - timeMs;
speed = 5 - (timeDif / 50);
console.log(speed);
}
timeMs = new Date().getMilliseconds();
alter = !alter;
var scrollDirection = getScrollTop() - scrollTop;
scrollDirection = scrollDirection / Math.abs(scrollDirection);
scrollTop = getScrollTop();
clearTimeout(scroller);
scroller = setTimeout(function(){
console.log('smooth scrolling active');
if(!scrolling) {
timeouts.length = 0;
scrolling = true;
var steps = 50;
var delay = 6;
for(var i = 0; i < steps; i++) {
(function(i){
var timeout = setTimeout(function(){
var perc = i / steps;
var val = (perc == 1) ? 1 : (-Math.pow(2, -10 * perc) + 1);
var scrollY = val * speed * scrollDirection;
window.scrollTo(0, getScrollTop() + scrollY);
setTimeout(function(){
if(i == (steps - 1)) scrolling = false;
}, steps * delay);
}, (i * delay));
timeouts.push(timeout);
})(i);
}
}
}, 50);
};
Ответ 4
для хром только попробуйте это - https://github.com/im4aLL/chromeSmoothScroll только 1 КБ
Ответ 5
В основном свиток вызывает отрывистое из-за перекраивания и переплавки. если вы можете проверить и уменьшить эти пересчеты, вы можете получить производительность прокрутки.
и проверьте функцию обратного вызова события onScroll, выполнив ли она какую-либо дорогостоящую логику. и есть ли утечка памяти.
Захват кучи инструментов инструмента Chrome может быть полезен для обнаружения утечек памяти и просмотра рецензий и переплавов.
Ответ 6
У Simplr-SmoothScroll есть одна ошибка - она не работает с телом, когда высота тела не авто.
Я нашел еще один плагин и стал для меня идеальным решением. https://github.com/inuyaksa/jquery.nicescroll
библиотека загрузки (demo) и добавить к началу
// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {
$("body").niceScroll();
});