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