2012-02-22 2 views
17

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

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

мне нужно что-то подобное только с ScrollWheel как:

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

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

Thankyou!

+0

Вы проверили [jQuery Docs] (http://api.jquery.com/scroll/) – Chad

+0

Да, прокрутка основана на позиции, и мне нужен фактический собственный вызов события scrollwheel, потому что есть некоторые действия, связанные с этими событиями. Спасибо в любом случае – escusado

+0

попробуйте проверить эту статью http://www.howtocreate.co.uk/tutorials/javascript/browserwindow Я думаю, что у вас есть то, что вам нужно. –

ответ

-4

Try:

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

(. Полностью тестировался Вдохновленный Binding to the scroll wheel when over a div)

+0

Извините не работает. Я пытаюсь найти другой подход с помощью макросов на уровне ОС.спасибо в любом случае :) – escusado

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

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

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

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

$(window).scroll(); 
-5

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


<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

Я считаю, что это нарушает «Я не могу ничего сделать, как« подделка »с помощью CSS-обмана». –

-2

я использовал этот код в создании своего собственный свитка.

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

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

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/

+0

В документах он не говорит, что поддерживает свойство 'delta' в кросс-браузере. Фактически, он даже не упоминает, что он вообще поддерживает его в объектах событий. – Alvaro

+2

Он, похоже, не работает: http://jsfiddle.net/95ssxLc9/1/ – Alvaro

1

Вы можете использовать событие JQuery прокрутки и на обратный вызов и может сделать ур математике. Пожалуйста, найдите полезный код 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>

0

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

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 

Альтернативно ........

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

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

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

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

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

Смежные вопросы