web-dev-qa-db-ja.com

「ダミー」マウスホイールイベントをトリガーする

任意のデルタでスクロールホイールイベントをトリガーする方法はありますか？ jQueryが「クリック」で行うのと同じように：

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

私はそのような何かが必要です：

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

私はcssトリックで 'fake it'のようなことはできません。実際のネイティブ（または可能な限り近い）イベントをトリガーする必要があります。

ありがとうございました！

javascriptjquerymouseeventmousewheelscrollwheel
21
escusado

たとえば、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/

1
meghea.iulian

Jquery scrollイベントを使用して、コールバック時にur mathを実行できます。便利なコードスニペットを見つけてください。

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

これをコンソールに入力してみて、その効果を確認できます。

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を持つ要素を使用してこれを行うことができます。

検索するURLの末尾に#idnamehereを追加します。ページにはそのID名の要素が必要です。

たとえば、これらのURLと、URLアドレスバーに入力したときに得られるものを比較します。

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

末尾に＃vote-to-add-sectionがあるものは、ID＃vote-to-add-sectionを持つ要素まで自動的に下にスクロールされます。

0
kig