Запустить «пустое» событие мыши - PullRequest
Новая
       28

Запустить «пустое» событие мыши

19 голосов
/ 23 февраля 2012

Есть ли способ вызвать событие колеса прокрутки с произвольной дельтой.Точно так же, как jQuery делает с «щелчком», например: 

$('#selector').trigger('click');

Мне нужно что-то подобное, просто с колесом прокрутки: 

$('#selector').trigger('DOMMouseScroll',{delta: -650});
//or mousewheel for other browsers

Я не могу сделать что-то вроде «подделать»с помощью css trickery мне нужно вызвать фактическое собственное (или как можно ближе) событие.

Спасибо!

Ответы [ 9 ]

1 голос
/ 18 сентября 2017

Вы можете использовать событие прокрутки JQuery и при обратном вызове вы можете сделать математику.Пожалуйста, найдите фрагмент кода, полезный. 

//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>
1 голос
/ 02 апреля 2014

Вам необходимо использовать jQuery.Event Например: 

// 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 );

Проверьте больше здесь: http://api.jquery.com/category/events/event-object/

0 голосов
/ 29 сентября 2017

Вы можете попробовать набрать это в консоли и увидеть его эффекты: 

document.body.scrollTop = document.body.scrollTop + 200

, где 200 - произвольное число. Точно так же вы можете попробовать это с scrollLeft: 

document.body.scrollLeft = document.body.scrollLeft + 200

или 

document.body.scrollLeft = document.body.scrollLeft - 200

Вы можете попробовать поиграть с этим понятием и методом окна setInterval ().

Дополнительно ........

Вы можете получить смещение элемента следующим образом: 

jQuery("#vote-to-add-section").offset()

, который даст вам результат как: 

{top: 9037.1875, left: 268}

Вы можете прокрутить до этого элемента что-то вроде этого: 

document.body.scrollTop = jQuery("#vote-to-add-section").offset().top

С другой стороны ........

Если вы просто хотите, чтобы сайт уже прокручивался до определенного элемента при первой загрузке сайта, вы можете сделать это с элементами с идентификатором:

Добавьте #idnamehere в конце URL, который вы ищете. На странице должен быть элемент с таким идентификатором.

Например, сравните эти URL-адреса и то, что вы получите, когда вводите их в адресную строку URL-адреса:

https://travel.usnews.com/rankings/worlds-best-vacations https://travel.usnews.com/rankings/worlds-best-vacations/#vote-to-add-section

Тот, в конце которого находится # voice-to-add-section, автоматически прокручивается вниз до элемента с id # voice-to-add-section.

0 голосов
/ 24 марта 2014

Я использовал этот код при создании собственного свитка. 

$('body').bind('mousewheel DOMMouseScroll', function(event) {
     var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail))) * -1;
}

Я добавил * -1, чтобы инвертировать. Вы можете удалить его.

0 голосов
/ 29 октября 2013

Привет, вы можете сделать это, добавив прослушиватель событий.Я искал то же самое и получил приведенный ниже фрагмент кода, и он работает.проверьте, что у вас есть такое же требование 

<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>
------------------------------------------------------------

на основе дельта-переменной, вы можете написать свои собственные функции.

В html 5 обрабатывается событие прокрутки мыши, вы можете попробоватьтаким же образом

0 голосов
/ 23 октября 2013

Вы пробовали это? http://jquerytools.org/documentation/toolbox/mousewheel.html Плагин для «управления колесом мыши»:)

0 голосов
/ 31 августа 2013

Это вызовет функцию прокрутки, если вы написали 

$(window).scroll();
0 голосов
/ 22 марта 2012 
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});

на самом деле это работает лучше: 

this.trigger("mousewheel", [0])
0 голосов
/ 23 февраля 2012

Попробуйте:

.trigger("mousewheel", {wheelDelta: 100})

(полностью не проверено. Вдохновлено Привязка к колесу прокрутки при превышении div )

...