12

ユーザーがスクロールする方向（「上」または「下」）を検出する必要があります。この回答にあるコードに基づいて：jQueryスクロールイベントの方向をどのように判断できますか？

私はそれを関数でラップしようとしたので、もう少し差別化されました-しかし、残念ながら、それは機能していません。値を返す方法と関係があると思いますが、方向は常に「上」です。JavaScriptにかなり慣れていないので、この問題の解決に問題があります。

コードは次のとおりです。

$(document).ready(function () {

    'use strict';

    var lastScrollTop = 0,
        st,
        direction;

    function detectDirection() {

        st = window.pageYOffset;

        if (st > lastScrollTop) {
            direction = "down";
        } else {
            direction = "up";
        }

        lastScrollTop = st;

        return  direction;

    }

    $(window).bind('scroll', function() {

        detectDirection();
        console.log(detectDirection());

    });

});

また、フィドルも設定しました。

問題がどこにあるかを見つけるのを手伝ってくれませんか。

4

4 に答える 4

6 
$(window).bind('scroll', function() {

    var dir = detectDirection();
    console.log(dir);

});

detectDirection()各スクロールイベント中に2回電話をかけていました。最初のものは正しい方向を検出しましたが、2番目のものは同じ場所でそれを見ただけなので、「上」に戻り、それがあなたが記録したものです。

于 2013-03-07T06:47:15.990 に答える
2

あなたがこれで何を得るかを見てください：

if (st > lastScrollTop) {
    direction = "down";
} else if (st < lastScrollTop ){
    direction = "up";
} else {
    direction = "static";
}

Barmarが述べたことに加えて、コンソール出力の上の行（呼び出し）を取り除き、そのままにしておくことができます。

console.log(detectDirection());
于 2013-03-07T06:53:37.340 に答える
2

lastScrollTopを更新しないため、コードはそのままでは機能しません。これが機能するコードです...

$(function(config){
    var lastScrollTop = 0, // setting initial scrolltop as top of page
        direction; // direction of scroll 1)up -1)down 0)static

    function detectDirection() {
        // current scrollTop can't be cached or in the local global scope
        var st = window.pageYOffset;

        if (st > lastScrollTop) {
            // scrolling down
            direction = -1;
        } else if (st < lastScrollTop ){
            // scrolling up
            direction = 1;
        } else {
            // static
            direction = 0;
        }

        // updated lastscrolltop with new current top
        lastScrollTop = st;

        // return the direction
        return direction;
    }`

静的として0を使用しました/1上にスクロールするために1を使用しました/下にスクロールするために-1を使用しました

それが誰かを助けることを願っています。

于 2014-03-17T15:22:00.310 に答える
1

BarMarの回答は当面の問題を解決しますが、このソリューションは2つのことを実行できるようにコードを構造化するのに役立たないため、新しい回答を提供します。

  1. スクロールオブジェクトのスコープをより広くして、他の場所でその属性にアクセスできるようにします。これにより、スクロール位置が特定の値である場合に何かを行うことができます。

  2. スクロールのパフォーマンスを向上させます。

    // Your current functionality
$(document).ready(function() {
  var scroll = {
    down: true,
    pos: 0
  };
  var scrollPos;

  var detectDirection = function() {
    scrollPos = window.pageYOffset;

    if (scrollPos > scroll.pos) {
      scroll.down = true;
    } else {
      scroll.down = false;
    }

    scroll.pos = scrollPos;
  };

  $(window).on('optimizedScroll', function() {
    detectDirection();

    // Do something based on scroll direction
    if (scroll.down == true) {
      // fooFunction();
    } else {
      // barFunction();
    }

    // Do something based on scroll position,
    // where scrollTrigger is a number
    if (scroll.pos > scrollTrigger) {
      // bazFunction();
    }
  });
});

// Improve scroll performance
(function() {
    var throttle = function(type, name, obj) {
      var obj = obj || window;
      var running = false;
      var func = function() {
        if (running) {
          return;
        }
        running = true;
        requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name));
          running = false;
        });
      };
      obj.addEventListener(type, func);
    };

    throttle('scroll', 'optimizedScroll');
})();

jQuery .bind（）のドキュメントに従って、.bind（）を使用するのではなく、.on（）を使用する必要があります。

スクロールパフォーマンスを改善するための即時呼び出し関数式（IIFE）は、スクロールイベントのMDNドキュメントから提供されます。

于 2015-12-18T18:18:49.363 に答える