javascript - raton - resources demos external jquery mousewheel jquery mousewheel js
Trigger evento de rueda de ratón "ficticio" (9)
¿Hay alguna manera de activar un evento de la rueda de desplazamiento con un delta arbitrario? Al igual que jQuery hace con ''clic'' como:
$(''#selector'').trigger(''click'');
Necesito algo así solo con una rueda de desplazamiento como:
$(''#selector'').trigger(''DOMMouseScroll'',{delta: -650});
//or mousewheel for other browsers
No puedo hacer nada como ''fingir'' con el truco de CSS, necesito activar el evento nativo real (o lo más cerca posible).
¡Gracias!
¿Has probado esto? http://jquerytools.org/documentation/toolbox/mousewheel.html Un complemento para "tomar el control de la rueda del ratón" :)
Esto llamará a la función de desplazamiento si ha escrito alguna
$(window).scroll();
Hola, puedes hacerlo agregando un detector de eventos. Busqué lo mismo y obtuve el siguiente fragmento de código y está funcionando. comprueba que tienes el mismo requisito
<html>
<head>
<title>Mouse Scroll Wheel example in JavaScript</title>
<style>
#scroll {
width: 250px;
height: 50px;
border: 2px solid black;
background-color: lightyellow;
top: 100px;
left: 50px;`enter code here`
position:absolute;
}
</style>
<script language="javascript">
window.onload = function()
{
//adding the event listerner for Mozilla
if(window.addEventListener)
document.addEventListener(''DOMMouseScroll'', moveObject, false);
//for IE/OPERA etc
document.onmousewheel = moveObject;
}
function moveObject(event)
{
var delta = 0;
if (!event) event = window.event;
// normalize the delta
if (event.wheelDelta) {
// IE and Opera
delta = event.wheelDelta / 60;
} else if (event.detail) {
// W3C
delta = -event.detail / 2;
}
var currPos=document.getElementById(''scroll'').offsetTop;
//calculating the next position of the object
currPos=parseInt(currPos)-(delta*10);
//moving the position of the object
document.getElementById(''scroll'').style.top = currPos+"px";
document.getElementById(''scroll'').innerHTML = event.wheelDelta + ":" + event.detail;
}
</script>
</head>
<body>
Scroll mouse wheel to move this DIV up and down.
<div id="scroll">Event Affect</div>
</body>
</html>
------------------------------------------------------------
basado en la variable delta puede escribir su propia funcionalidad personalizada.
En html 5 se está manejando el evento de desplazamiento del mouse, también puede intentarlo de esa manera
Necesitas usar jQuery.Event Por ejemplo:
// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "DOMMouseScroll",{delta: -650} );
// trigger an artificial DOMMouseScroll event with delta -650
jQuery( "#selector" ).trigger( e );
Compruebe más aquí: http://api.jquery.com/category/events/event-object/
Puede usar el evento jquery scroll y, al devolver la llamada, puede hacer sus cálculos. Por favor, encuentre el código snipet útil.
//to make dummy paragraphs
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
//dummy paragraphs end here
//the below scroll() callback is triggered eachtime mouse wheel scroll happens
$( window ).scroll(function() { //i reference to window if u want u can iD a div and give div ID reference as well
console.log("scolling....");
//update with the delta u required.
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
div {
color: blue;
}
p {
color: green;
}
span {
color: red;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
</body>
</html>
Puedes intentar escribir esto en la consola y ver sus efectos:
document.body.scrollTop = document.body.scrollTop + 200
donde 200 es un número arbitrario. Del mismo modo, también puedes probar esto con scrollLeft:
document.body.scrollLeft = document.body.scrollLeft + 200
o
document.body.scrollLeft = document.body.scrollLeft - 200
Puedes intentar jugar con este concepto y con el método de la ventana setInterval ().
Adicionalmente........
Puede obtener el desplazamiento de un elemento de la siguiente manera:
jQuery("#vote-to-add-section").offset()
lo que te dará un resultado como:
{top: 9037.1875, left: 268}
Podrías desplazarte a ese elemento con algo como esto:
document.body.scrollTop = jQuery("#vote-to-add-section").offset().top
Alternativamente........
Si solo desea que el sitio ya se desplace hacia un elemento en particular cuando se carga el sitio por primera vez, puede hacerlo con elementos que tengan una identificación:
Agregue #idnamehere al final de una URL que está buscando. Debe haber un elemento con ese nombre de identificación en la página.
Por ejemplo, compare estas URL y lo que obtiene cuando las ingresa en la barra de direcciones de la URL:
https://travel.usnews.com/rankings/worlds-best-vacations https://travel.usnews.com/rankings/worlds-best-vacations/#vote-to-add-section
El que tiene # sección de voto para agregar al final se desplaza automáticamente hacia abajo hasta el elemento con id # sección de voto para agregar.
Tratar:
.trigger("mousewheel", {wheelDelta: 100})
(Completamente sin probar. Inspirado por la unión a la rueda de desplazamiento cuando está sobre un div )
Utilicé este código para hacer mi propio pergamino.
$(''body'').bind(''mousewheel DOMMouseScroll'', function(event) {
var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail))) * -1;
}
Agregué * -1 para invertir. Usted puede eliminarlo.
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});
en realidad esto funciona mejor:
this.trigger("mousewheel", [0])