Tengo 3 pestañas en la interfaz de usuario. A medida que el usuario se desplaza hacia abajo, se muestra la segunda pestaña y luego la tercera pestaña. Sin embargo, la velocidad de desplazamiento de las pestañas es rápida, por lo que tan pronto como el usuario se desplaza desde la primera pestaña, se ve la tercera pestaña. Por favor, ayúdenme a ralentizar el proceso para que se vea la segunda pestaña.
function checkPosition(){ var div1 = $("section.u3gm-header"); var div2 = $('section.u3m-slider-top-tabs'); var div1_top = div1.offset().top; var div2_top = div2.offset().top; var div1_bottom = div1_top + div1.height(); var div2_bottom = div2_top + div2.height(); return [div1_bottom, div2_top, div1_top, div2_bottom]; } var lastScrollTop = 0; $(window).scroll(function() { var st = $(this).scrollTop(); let [div1_bottom, div2_top, div1_top, div2_bottom] = checkPosition(); if (st > lastScrollTop){ if (div1_bottom >= div2_top && div1_top < div2_bottom) { console.log(slider.index); if (slider.index >= slider.slideIds.length - 1) { slider.index = slider.slideIds.length - 1; }else{ console.log(slider.index); slider.index += 1; slideTo(slider.index); } } else { $("#result").html(""); } }else{ if (Math.floor(div1_bottom) <= Math.floor(div2_top) && div1_top < div2_bottom) { if (slider.index <= 0) { slider.index = 0; }else{ slider.index -= 1; slideTo(slider.index); } } } });Esto podría ayudar.
De la documentación de MDN de scrollIntoView Puede pasar la opción en lugar de booleano.
scrollIntoViewOptions Optional A Boolean or an object with the following options: { behavior: "auto" | "instant" | "smooth", block: "start" | "center" | "end" | "nearest", inline: "start" | "center" | "end" | "nearest", }Así que simplemente puede pasar un parámetro como este.
{ const element = document.getElementById(id); element.scrollIntoView({ block: 'end', behavior: 'smooth' }); }Esto hará que los elementos se desplacen lentamente.