javascript - instalar - Habilitar el desplazamiento suave para mi sitio web en todos los navegadores

como activar javascript en mi celular

Question

Estoy desarrollando un sitio web de desplazamiento de paralaje usando las bibliotecas Stellar y Skrollr . El sitio web se comporta perfectamente en Firefox debido a la función de desplazamiento suave de Firefox, pero en Chrome, el desplazamiento con la rueda del mouse es desigual, y el efecto de paralaje está casi arruinado. ¿Hay alguna forma de obtener un desplazamiento suave con la rueda del mouse en todos los navegadores mientras se mantiene el rendimiento?

Answer 1

Básicamente, el desplazamiento causa sacudidas debido a los repintados y reflujos. Si puede verificar y reducir esos reflows, es posible que obtenga el rendimiento de desplazamiento.

y comprueba la función de devolución de llamada al evento onScroll, ya sea que ejecute cualquier lógica costosa. y hay alguna fuga de memoria.

La instantánea del montón de la barra de herramientas del desarrollador de Chrome será útil para detectar pérdidas de memoria y para ver repintados y reflujos.

Answer 2

Encontré dos complementos de jQuery que pueden hacer lo que quieras.

Simplr-SmoothScroll // Fuente: SE Question

jQuery SmoothWheel

Espero que esto ayude.

edit: eliminó a SmoothWheel debido a los comentarios; no se ha actualizado en años, y SmoothScroll parece estar bien mantenido.

Answer 3

No tuve mucho tiempo, pero intenté escribir una funcionalidad de desplazamiento suave (cruzado y sucio) sobre la marcha. Cuando dejas de desplazarte, decelera suavemente. Puedes reescribirlo un poco para que se ajuste a tus necesidades.

Pruébalo aquí:

Desplazamiento suave:

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);
};

http://jsfiddle.net/ubawR/4/

Answer 4

Si eres programador de culto Cargo , ve con jQuery. Proceda solo si usted es programador real .

Atornille jQuery.animate() , entienda las matemáticas detrás y elija un algoritmo. Robert Penner tiene una buena demostración , elegí EaseOutQuad.

Lea aquí cómo manejar el estilo de navegador cruzado de la rueda del mouse, luego, lea un poco más .

En este código, elijo no admitir IE 8 y versiones anteriores. La idea es conectar el evento de la rueda, evitarlo (ya que el comportamiento predeterminado es el salto brusco) y realizar su propio salto suave.

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);
})();

Como puede ver en esta demostración , prefiero el menor alivio posible, solo para evitar el desplazamiento brusco. Lee los comentarios anteriores y diseña tu propio desplazamiento que se adapte a tu proyecto.

Nota: la rueda del ratón también se engancha al touchpad, pero no a las teclas de arriba / abajo. También debes considerar enganchar eventos clave.

Answer 5

Simplr-SmoothScroll tiene un error: no funciona con el cuerpo, cuando la altura del cuerpo no es automática.

Encontré otro complemento y se convirtió en la solución perfecta para mí. https://github.com/inuyaksa/jquery.nicescroll

descargar biblioteca ( demo ) y agregar al inicio

// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {
$("body").niceScroll();
});

Answer 6

para Chrome, solo prueba esto: https://github.com/im4aLL/chromeSmoothScroll solo 1 KB

Answer 7

w3schools ha proporcionado un código JQuery súper simple para dar a todas las etiquetas de anclaje un efecto de desplazamiento suave.

$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on(''click'', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery''s animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$(''html, body'').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});

Aquí viene la demostración: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll