57

ユーザーが使用できる特定のテキストボックスをスクロールするときのjsリスナーはありますか？スクロール以外はonclickのようなものです。数値入力スクロール用のHTML5イベントリスナーを見ました-Chromeのみですが、Chrome専用のようです。クロスブラウザを探しています。

4

5 に答える 5

128

jQueryに関係のない答えを見つけたいと思ってこの質問を見つけた人は、window通常のイベントリスニングを使用して「スクロール」イベントにフックします。CSSセレクター可能ないくつかの要素をリッスンするスクロールを追加したいとします。

// what should we do when scrolling occurs
function runOnScroll(element) {
  // not the most exciting thing, but a thing nonetheless
  console.log(element);
};

// grab elements as array, rather than as NodeList
const elements = document.querySelectorAll(`...`);

// and then make each element do something on scroll
elements.forEach(element => {
  window.addEventListener(
    "scroll",
    () => runOnScroll(element),
    { passive: true }
  );
});

または、ハンドラーとして単一のスクロールリスナーをバインドし、代わりに関数内のevt => runOnScroll(evt)すべてを処理する方法を見つけます。elementsrunOnScroll

このイベントがスクロール自体に干渉しないことをブラウザに通知するためにpassive属性を使用していることに注意してください。これは、スムーズなスクロール動作が必要な場合に重要です（また、スクロール中にリフロートリガーのDOM更新を実行しないようにする必要があります）。

ボーナスポイントについては、スクロールハンドラーにロックメカニズムを与えて、すでにスクロールしている場合に実行されないようにすることができます。

// global lock, so put this code in a closure of some sort so you're not polluting.
let locked = false;
let lastCall = false;

function runOnScroll(element) {
  if(locked) return;

  if (lastCall) clearTimeout(lastCall);
  lastCall = setTimeout(() => {
    runOnScroll(element);
    // you do this because you want to handle the last
    // scroll event, even if it occurred while another
    // event was being processed.
  }, 200);

  // ...your code goes here...

  locked = false;
};
于 2013-08-30T21:38:11.603 に答える
6

私は、古い学校のJS（JQueryなし）を使用したスティッキーメニューの解決策を見つけるために多くのことを探していました。だから私はそれで遊ぶために小さなテストを構築します。jsで解決策を探している人には役立つと思います。メニューを元に戻し、よりスムーズにするための改善が必要です。また、位置を修正する代わりに元のdivを複製する、JQueryを使用した優れたソリューションを見つけました。修正後にページ要素の残りの部分を置き換える必要がないため、より優れています。誰もがJSでそれを行う方法を知っていますか？注釈を付け、修正し、改善してください。

<!DOCTYPE html>
<html>

<head>
<script>

// addEvent function by John Resig:
// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

    if ( obj.attachEvent ) {

        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else {
        obj.addEventListener( type, fn, false );
    }
}
function getScrollY() {
    var  scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;

    } else if( document.body && document.body.scrollTop )  {
        //DOM compliant
        scrOfY = document.body.scrollTop;
    } 
    return scrOfY;
}
</script>
<style>
#mydiv {
    height:100px;
    width:100%;
}
#fdiv {
    height:100px;
    width:100%;
}
</style>
</head>

<body>

<!-- HTML for example event goes here -->

<div id="fdiv" style="background-color:red;position:fix">
</div>
<div id="mydiv" style="background-color:yellow">
</div>
<div id="fdiv" style="background-color:green">
</div>

<script>

// Script for example event goes here

addEvent(window, 'scroll', function(event) {

    var x = document.getElementById("mydiv");

    var y = getScrollY();      
    if (y >= 100) {
        x.style.position = "fixed"; 
        x.style.top= "0";
    } 
});

</script>
</body>
</html>
于 2015-05-06T07:24:51.303 に答える
3

以下の基本的なアプローチでは要件が不十分ではありませんか？

divを持つHTMLコード

<div id="mydiv" onscroll='myMethod();'>


JSには以下のコードがあります

function myMethod(){ alert(1); }
于 2013-10-22T10:13:41.007 に答える
0

ユーザーが使用できる特定のテキストボックスをスクロールするときのjsリスナーはありますか？

DOM L3 UIイベントの仕様は初期定義を示していますが、廃止されたと見なされます。

単一のハンドラーを追加するには、次のようにします。

  let isTicking;
  const debounce = (callback, evt) => {
    if (isTicking) return;
    requestAnimationFrame(() => {
      callback(evt);
      isTicking = false;
    });
    isTicking = true;
  };
  const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
  document.defaultView.onscroll = evt => debounce(handleScroll, evt);

複数のハンドラーの場合、またはスタイル上の理由で望ましい場合は、上記のようaddEventListenerにハンドラーを割り当てるのではなく、を使用できます。onscroll

lodashのようなものを使用する_.debounce場合は、おそらく次の方法で解決できます。

const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => _.debounce(() => handleScroll(evt));

ブラウザの互換性を確認し、実際のデバイスでテストしてから呼び出してください。

于 2018-12-27T13:46:09.813 に答える
-1 
let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // Do something with the scroll position
}

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});
于 2021-07-06T23:05:50.863 に答える