Tengo un sitio de navegación de una sola página y todas las secciones / elementos de navegación están min-heightconfigurados en 100vh. Con eso tengo un fragmento de desplazamiento suave para navegar.
Si hago un desplazamiento manual y la sección no está centrada (como lo haría si hago clic en un elemento del menú), me gustaría que se centrara después de un período de tiempo determinado. Tenga en cuenta que no quiero deshabilitar el desplazamiento para navegar por el menú.
Estaba pensando en agregar algunos js con el código de desplazamiento suave. Algo para verificar el desplazamiento de la posición de la sección y si no está centrado, deslícelo con alguna función de suavizado.
https://jsfiddle.net/9ta3yh52/ tome esto como referencia, si un color está en más del 75% del puerto de visualización, desplácese hasta ese elemento.
Gracias por tu ayuda :)
EDITAR / SOLUCIÓN:
El acercamiento más cercano lo ha dado hasta ahora @Hastig Zusammenstellen
https://stackoverflow.com/a/39188110/6717849
Tienes que modificarlo según tus necesidades para que coincida con el número de secciones que tienes. La lógica es fácil cuando las secciones están configuradas para height: 100vh:
if (scrollTop <= sectionHeightHalf) {
$('html, body').animate({
scrollTop: $("#section1").offset().top
}, 300);
} else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#section2").offset().top
}, 300);
} else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 3 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#section3").offset().top
}, 300);
} else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 4 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 300);
} else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 5 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#section5").offset().top
}, 300);
// etc etc
} else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#lastsection").offset().top
}, 300);
}
Se hizo una nueva versión usando este código que se inspiró o se basó en el código de aquí .
Soluciona el problema de doble desplazamiento de la última versión, pero ahora parece que a veces se queda después de que se centra automáticamente.
$(function() {
$(window).scroll(function() {
$('monitor').html('SCROLLING');
clearTimeout($.data(this, 'scrollCheck'));
$.data(this, 'scrollCheck', setTimeout(function() {
$('monitor').html('PAUSED');
var sectionHeightHalf = $(window).height() / 2;
var scrollTop = $(window).scrollTop();
if (scrollTop <= sectionHeightHalf) {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 300);
} else if
(scrollTop >= sectionHeightHalf &&
scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#services").offset().top
}, 300);
} else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
$('html, body').animate({
scrollTop: $("#gallery").offset().top
}, 300);
}
}, 300) );
});
});html, body {
margin: 0;
padding: 0;
}
section {
position: relative;
}
markercenter, markerbottom, markerfixed, monitor {
/* scaffolding, to be removed */
display: flex;
justify-content: center;
align-items: center;
height: 20px; width: 20px;
font-size: 14px;
color: white;
}
markercenter {
/* scaffolding, to be removed */
/* these are here to judge center of screen for testing */
position: absolute;
top: 50%; transform: translateY(-50%);
left: 50%; transform: translateX(-50%);
background-color: black;
}
markerbottom {
/* scaffolding, to be removed */
/* these are here to judge center of screen for testing */
position: absolute;
//top: 50%; transform: translateY(-50%);
left: 50%; transform: translateX(-50%);
bottom: -10px;
height: 20px; width: 20px;
font-size: 14px;
color: white;
background-color: black;
}
markerfixed {
/* scaffolding, to be removed */
/* these are here to judge center of screen for testing */
position: fixed;
top: 50%; transform: translateY(-50%);
left: 50%; transform: translateX(-50%);
height: 20px; width: 20px;
background-color: rgba(251, 45, 45, 0.7);
}
monitor {
/* scaffolding, to be removed */
position: fixed;
left: 50%; transform: translateX(-50%);
bottom: 0;
width: 100px;
padding: 2px 10px 0px 10px;
font-size: 14px;
color: white; font-weight: bold;
background-color: black;
}
section {
width: 100%;
min-height: 100vh;
}
#about{
background-color: hsla(182, 100%, 85%, 0.5);
}
#services{
background-color: hsla(61, 99%, 59%, 0.5);
}
#gallery{
background-color: rgba(195, 251, 45, 0.5);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="about">
<markercenter>1</markercenter><markerbottom>1</markerbottom>
</section>
<section id="services">
<markercenter>2</markercenter><markerbottom>2</markerbottom>
</section>
<section id="gallery">
<markercenter>3</markercenter><markerbottom>3</markerbottom>
</section>
<monitor></monitor>
<markerfixed></markerfixed>violín
https://jsfiddle.net/Hastig/9ta3yh52/13/
versión anterior con problema de doble desplazamiento
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras