Trigger 'dummy' событие колеса мыши

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

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

Мне нужно что-то подобное только с помощью scrollwheel:

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

Я не могу ничего сделать, как "подделка" с помощью CSS-обмана, мне нужно вызвать фактическое собственное (или как можно более близкое) событие.

Thankyou!

Ответы

Ответ 1

Вам нужно использовать 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/

Ответ 2

Вы можете использовать событие прокрутки jquery, и при обратном вызове u может выполнять математику ur. Пожалуйста, найдите полезный код snipet.

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

Ответ 3

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

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

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

Ответ 4

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

$(window).scroll();

Ответ 5

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

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

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

Ответ 8

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

<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 обрабатывается событие прокрутки мыши, вы можете попробовать таким образом также

Ответ 9

this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});

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

this.trigger("mousewheel", [0])