Есть ли способ вызвать событие колеса прокрутки с произвольной дельта. Точно так же, как jQuery делает с 'click' как:
$('#selector').trigger('click');
Мне нужно что-то подобное только с помощью scrollwheel:
$('#selector').trigger('DOMMouseScroll',{delta: -650});
//or mousewheel for other browsers
Я не могу ничего сделать, как "подделка" с помощью CSS-обмана, мне нужно вызвать фактическое собственное (или как можно более близкое) событие.
Thankyou!
Вам нужно использовать 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/
Вы можете использовать событие прокрутки 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>Вы можете попробовать ввести его в консоль и посмотреть его эффекты:
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.
Это вызовет функцию прокрутки, если вы написали какие-либо
$(window).scroll();
Я использовал этот код для создания собственного прокрутки.
$('body').bind('mousewheel DOMMouseScroll', function(event) {
var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail))) * -1;
}
Я добавил * -1 для инвертирования. вы можете удалить его.
Вы пробовали это? http://jquerytools.org/documentation/toolbox/mousewheel.html Плагин, чтобы "взять под контроль колесико":)
Попробуйте:
.trigger("mousewheel", {wheelDelta: 100})
(Полностью непроверенный. Вдохновленный привязка к колесу прокрутки, когда над div)
Привет, вы можете сделать это, добавив прослушиватель событий. Я искал то же самое и получил приведенный ниже фрагмент кода, и он работает. проверьте, что у вас есть то же требование
<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 обрабатывается событие прокрутки мыши, вы можете попробовать таким образом также
this.trigger("mousewheel", {intDelta:0, deltaX:0, deltaY:0});
на самом деле это работает лучше:
this.trigger("mousewheel", [0])