examples - jquery ui
¿Cómo hacer cumplir una regla de "desplazamiento suave" para mousewheel, jQuery? (7)
¿Cómo estás? Mi pregunta:
¿Cómo puedo controlar o especificar la forma en que un documento se desplaza a la posición de deseo que se describe con la rueda de desplazamiento del mouse y / o al agarrar la barra de desplazamiento? Lo que quiero es superar el método predeterminado particular de desplazamiento de página.
Como funciona actualmente, la página salta a la derecha a x # de píxeles hacia abajo por "muesca" que avanza en la rueda de desplazamiento. O va directamente a donde arrastra la barra de desplazamiento. Lo que estoy buscando es una extensión simple de jquery que pueda aplicar ciertas reglas de desplazamiento. Los principios son simples. Aceleración impuesta, esto evitaría que la página se mueva demasiado rápido sin acelerar primero. configurable como una velocidad de px / seg, con la opción de aplicar funciones de aceleración ... Hay un máximo de px / seg que la página puede deslizar / mover / arrastrar. y en tercer lugar, se aplica una regla de desaceleración cuando la página se aproxima a su posición de destino (en%, px?). Esto puede tener que calcularse de una de las muchas maneras, y puede ser más complicado. Es decir, al desplazar los últimos 25 píxeles a la posición de destino, se aplica la desaceleración. Hay más ... La principal preocupación por la que me gustaría prepararme sería garantizar que los pequeños pergaminos de página reciban un apoyo total y que no sean problemáticos.
¿Qué tipo de enfoques de jQuery podrían utilizarse para controlar el documento de esta manera? kyle
Actualización ::: Gracias por seguir esta Q, si es así. Una gran noticia. ¡Encontré un excelente complemento que, con suerte, puede manejarse para apoyar los efectos deseados, tú! He implementado un contenedor de toda la página y utilicé este ingenioso script jScrollPane para comandar si desea desplazar la página http://jscrollpane.kelvinluck.com/fullpage_scroll.html
Ya hay una gran diferencia en el rendimiento de la página. Cada muesca de desplazamiento de la rueda es de un tercio a la mitad de la muesca de desplazamiento nativa del navegador, por lo que se mueve más lentamente, lo que está bien, sin duda es ajustable.
Sin embargo, todavía tenemos el método de movimiento de página de bloqueo de estancamiento.
Yo mismo escribo javascript, pero más es como si lo reescribiera. Lo que creo que hay que hacer es una "cola" construida de píxeles para desplazarse a lo largo de una página, con el tiempo total compuesto: y luego una huella de animación definida y ejecutada como tres fases, una aceleración de aceleración, una fase de aceleración máxima, una fase de aceleración máxima y una desaceleración fase.
¿Alguien podría ofrecer alguna sugerencia sobre cómo nosotros?
Detatch mousescrollwheel de su función nativa de desplazamiento de la página.
escucha las muescas del mousescroll; y en el caso de una muesca: inicie la función principal para iniciar el movimiento de la página, pero también escuche y agregue clics de muesca adicionales a la "cola" que se recalcula y se aplica al rollo de la ventana que reemplaza el total distancetoscroll anterior. antes de calcular el siguiente desplazamiento total, que proporciona una manera de anticipar el destino y desacelerar. Las funciones básicas para iniciar el movimiento no querrían reiniciarse, ya que probablemente se producirán varios clics de muesca mientras se acelera, pero solo se debe recalcular cuándo y dónde desacelerar se debe aplicar.
Lo siento de nuevo por no haber publicado ningún código real todavía, no estoy seguro de por dónde empezar y esperaba que alguien pudiera saber si mwintent funcionaría para esto y, de ser así, también podría tener algunas ideas sobre cómo aplicar una desaceleración al rollo, que parece ser las dos únicas diferencias entre el efecto deseado y el estado de los complementos actuales que son similares.
Aquí hay una buena solución. Mira esto en http://ataredo.com/morphology/lucidscroll/
<script src="file-directory/jquery.js"></script>
<script src="file-directory/lucid.js"></script>
<script>
$(window).on(''load'', function() {
$(this).impulse();
});
</script>
Karl Swedberg ha creado un plugin jQuery llamado Smooth Scroll , que parece ser lo que buscas.
Lo que quería hacer era simular el desplazamiento suave del navegador en los navegadores que no lo admiten de forma nativa, lo ha desactivado de forma predeterminada o tiene una implementación incorrecta.
Gracias a la respuesta de lumbric, he encontrado esta solución:
$(function () {
var top = 0,
step = 55,
viewport = $(window).height(),
body = $.browser.webkit ? $(''body'') : $(''html''),
wheel = false;
$(''body'').mousewheel(function(event, delta) {
wheel = true;
if (delta < 0) {
top = (top+viewport) >= $(document).height() ? top : top+=step;
body.stop().animate({scrollTop: top}, 400, function () {
wheel = false;
});
} else {
top = top <= 0 ? 0 : top-=step;
body.stop().animate({scrollTop: top}, 400, function () {
wheel = false;
});
}
return false;
});
$(window).on(''resize'', function (e) {
viewport = $(this).height();
});
$(window).on(''scroll'', function (e) {
if (!wheel)
top = $(this).scrollTop();
});
});
Pon algo de contenido en tu página el tiempo suficiente para tener barras de desplazamiento. Luego usa la rueda del ratón. Funciona en todos los navegadores. He usado jQuery-1.7.2 y el plugin mousescroll mencionado en la publicación de lumbric.
El paso var significa cuántos píxeles se desplazarán en cada evento de la rueda del mouse. ~ 55 píxeles es lo que he encontrado que es el valor predeterminado en la mayoría de los sistemas.
También es posible que desee cambiar la velocidad de la animación, aparte de que se necesita el resto de la lógica del código para que las cosas funcionen correctamente.
EDITAR: Tenga en cuenta que he extraído la funcionalidad anterior en un complemento de jquery de conveniencia.
Mi solución con efecto móvil.
<div id="parent">
<div id="child">aaa aaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa abbbbbbbbbbbbbbbbb bbbbbbbbbbbbcc ccccccc ccccccccccc cccccccd ddddddd ddd ddddd ddddd dddddddd aaaaaaaaaaaa aaaaaaaa aaa</div>
#parent {
width: 300px;
height: 300px;
background-color: #aaa;
margin: auto auto;
overflow: hidden;
}
#child {
width: 200px;
height: 800px;
background-color: #999;
margin: auto auto;
text-align: justify;
position: relative;
top: 0;
-webkit-transition: all 0.5s ease-out;
}
$(''#parent'').bind(''mousewheel'', function (e) {
if (!(e.originalEvent.wheelDelta == 120)) {
var top = parseInt($("#child").css("top"));
$("#child").css("top", (top - 100) + "px");
top = parseInt($("#child").css("top"));
if (top <= -500) {
setTimeout(function () {
$("#child").css("top", "-500px");
}, 100);
}
} else {
var top = parseInt($("#child").css("top"));
$("#child").css("top", (top + 100) + "px");
top = parseInt($("#child").css("top"));
if (top >= 0) {
setTimeout(function () {
$("#child").css("top", "0");
}, 100);
}
}
});
Quieres darle una oportunidad a este
https://github.com/galambalazs/smoothscroll-for-websites
Tiene ajustes agradables para ajustar la animación y parece estar bien mantenido.
// Scroll Variables (tweakable)
var defaultOptions = {
// Scrolling Core
frameRate : 100, // [Hz]
animationTime : 1200, // [ms]
stepSize : 80, // [px]
// Pulse (less tweakable)
// ratio of "tail" to "acceleration"
pulseAlgorithm : true,
pulseScale : 4,
pulseNormalize : 1,
// Acceleration
accelerationDelta : 50, // 50
accelerationMax : 3, // 3
// Keyboard Settings
keyboardSupport : true, // option
arrowScroll : 50, // [px]
// Other
touchpadSupport : false, // ignore touchpad by default
fixedBackground : true,
excluded : ''''
};
Tuve un problema muy similar. Quería cambiar la función de desplazamiento de una página normal. Quiero que cada desplazamiento sea exactamente de una altura específica para que la página se detenga solo en posiciones muy específicas.
Me di cuenta de la siguiente manera:
1. Plugins utilizados
Descargue e incluya los siguientes 2 complementos de jQuery y jQuery en sí:
- scrollTo (ver también here )
- mousewheel (ver también here )
2. Evento de rueda del ratón
La forma más fácil es usar el enchufe de rueda del ratón de esa manera:
$(''body'').mousewheel(function(event, delta) { /* code here */ });
La variable delta es entonces negativa o positiva, dependiendo de si la rueda se desplazó hacia arriba o hacia abajo. Si devuelve falso , creo que (!) Desactiva el desplazamiento normal.
3. método de desplazamiento
Para desplazarme por la página utilicé scrollTo, pero cualquier otro complemento (como Smooth Scroll que se sugiere en la otra respuesta) también debería hacerlo.
4. Código completo
Coloca esto en la parte principal de tu archivo HTML:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(''body'').mousewheel(function(event, delta) {
# This if might not be very elegant!
if (delta < 0) {
$(''body'').scrollTo(''+=100'', 1500 );
}
else
$(''body'').scrollTo(''-=100'', 1500 );
return false;
});
});
</script>
5. Demo
He creado una demostración aquí: http://pastehtml.com/view/ba0ziusqk.html
var $window = $(window),
scrollDistance = 300,
scrollSpeed = 500,
scrollEffect = ''swing'',
scrollAmount = 1,
smoothScroll;
if (! (''ontouchstart'' in document.documentElement) && ! $(''body'').hasClass(''modal-open'')) {
$window.on("mousewheel DOMMouseScroll", function (event) {
event.preventDefault();
if (smoothScroll) {
// Start scrolling while waiting for final scoll amount (user stopped wheeling)
if (scrollAmount == 1) {
var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
var finalScroll = $window.scrollTop() - parseInt(delta * (scrollDistance * scrollAmount));
$(''html, body'').stop().animate({ scrollTop: finalScroll }, scrollSpeed, scrollEffect);
}
// Increase scroll amount
scrollAmount++;
// Clear current timeout
clearTimeout(smoothScroll);
}
// Set animated scroll
smoothScroll = setTimeout(function() {
var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta * (scrollDistance * scrollAmount));
// Reset scroll amoount
scrollAmount = 1;
$(''html, body'').stop().animate({ scrollTop: finalScroll },
(scrollSpeed*scrollAmount),
scrollEffect
);
// Clear timeout holder
smoothScroll = null;
}, 100);
});
}