30

視差のあるWebサイトを作成していますが、ユーザーエクスペリエンスを向上させるために、マウスホイールを使用してページのスクロールをスムーズにしたいと考えています。私が得ることができた最も良い例はこのウェブサイトでした：http：//www.milwaukeepolicenews.com/#menu=home-page 私のウェブサイトにそれに似たもの、スムーズな垂直スクロールとスクロール慣性を得ることができれば素晴らしいでしょう。

非常に軽いBrandonAaronのjQueryマウスホイールを使用していることに気付きましたが、私は初心者であり、自分で動作させることはできません。

また、私は彼らのmpd-parallax.jsでこれに気づきました：

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
        if(delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })

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

編集

もうすぐです。このフィドルを見てください：http：//jsfiddle.net/gmelcul/cZuym/ミルウォーキー警察のウェブサイトのように、スクロールするためのイージングメソッドを追加するだけで済みます。

4

5 に答える 5

18

私はそれが本当に古い投稿であることを知っていますが、ここに私が作った良い解決策があります:

function handle(delta) {
    var animationInterval = 20; //lower is faster
  var scrollSpeed = 20; //lower is faster

    if (end == null) {
    end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}

テストしてください: http://jsfiddle.net/y4swj2ts/3/

于 2016-03-03T14:46:16.267 に答える
10

ここに 2 つの jsfiddles があります。1 つはスクリプトを使用し、もう 1 つはスクリプトを使用していないため、比較できます。

jQuery マウスホイール プラグインを使用した JavaScript :

$(document).ready(function() {
    var page = $('#content');  // set to the main content of the page   
    $(window).mousewheel(function(event, delta, deltaX, deltaY){
        if (delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })
});

2 つを比較します。私が知る限り、スクリプトを使用するとマウス ホイールの速度が遅くなるため、スクリプトを使用しない場合と同じ距離をスクロールするには、より多くの物理的な回転が必要になります。スクロールが遅いため、よりスムーズに感じるかもしれません (おそらくグラフィックス ユニットの方が簡単なので、実際にはよりスムーズになるかもしれません)。

于 2013-02-16T01:25:48.227 に答える
4

ねえ、ここで別のリソースを手に入れました。これは、スムーズホイールを使用するのが本当に簡単です

すべてのデバイスでマウスホイールのスムーズなスクロール アニメーションを有効にし、完璧に動作します。

于 2014-10-22T12:57:56.933 に答える
4

スクローラーをチェックしてください。視差効果を作成するプラグインです。スムーズ スクロールを切り替えるには、プラグインを初期化するときにオプションがあります。

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});
于 2013-07-29T19:16:02.590 に答える
3

このプラグインを見つけました。いくつかの優れたオプションがあり、すべての主要なデバイスで動作しますhttp://areaaperta.com/nicescroll/

于 2013-07-31T09:00:33.693 に答える