web-dev-qa-db-ja.com

jquery垂直マウスホイールスムーズスクロール

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

Brandon Aaronの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;
    })

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

[〜＃〜] edit [〜＃〜]

私はほとんどそこにいます。このフィドルを見てください： http://jsfiddle.net/gmelcul/cZuym/ ミルウォーキー警察のWebサイトのようにスクロールするイージングメソッドを追加するだけです。

jquerymousewheelsmooth-scrollinginertiaparallax.js
30
gigi melcul

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

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/

18
user5863872

以下に2つのjsfiddleを示します。1つはスクリプトあり、もう1つはスクリプトなしです。比較できます。

jQuery mousewheelプラグイン を使用した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つを比較します。私の知る限り、スクリプトはマウスホイールを遅くするので、スクリプトがない場合と同じ距離をスクロールするには、より物理的に回す必要があります。スクロールが遅いために滑らかに感じられる場合があります（グラフィックスユニットではおそらく簡単になるため、実際には滑らかになる場合があります）。

10
Cymen

skrollr を確認してください。視差効果を作成するためのプラグインです。プラグインを初期化してスムーズなスクロールを切り替えるオプションがあります：

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});
4
atomicrabbit

ちょっと私はここで別のリソースを入手しました。これは本当に簡単に使用できます smoothwheel

それはすべてのデバイスのマウスホイールでスムーズなスクロールアニメーションを可能にし、完璧に動作します！

4
GBM

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

3
iacobalin