web-dev-qa-db-ja.com

すべてのブラウザで私のウェブサイトのスムーズなスクロールを有効にします

Stellar および Skrollr ライブラリを使用して視差スクロールWebサイトを開発しています。 Firefoxのスムーズなスクロール機能により、WebサイトはFirefoxで完全に動作しますが、Chromeでは、マウスホイールでのスクロールがぎくしゃくしており、視差効果はほとんど損なわれています。パフォーマンスを維持しながら、すべてのブラウザーでマウスホイールを使用してスムーズにスクロールする方法はありますか？

javascriptperformancescrollparallaxsmooth-scrolling
32
Ian

あなたが望むことをするかもしれない2つのjQueryプラグインを見つけました。

Simplr-SmoothScroll //ソース： SE Question

jQuery SmoothWheel

お役に立てれば。

edit：コメントのためにSmoothWheelを削除しました-それは年齢で更新されておらず、SmoothScrollはよく維持されているようです。

43
Labu

カーゴカルトプログラマー の場合、jQueryを使用します。あなたが 本物のプログラマー である場合のみ続行してください。

ネジ jQuery.animate（） 、背後にある数学を理解し、アルゴリズムを選択します。ロバート・ペナー ニースのデモがあります 、私はEaseOutQuadを選びました。

マウスホイールのクロスブラウザスタイルの処理方法を読む こちら を読んでから、 もっと読む を実行してください。

このコードでは、IE 8以前。

Math.easeOutQuad = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };

(function() { // do not mess global space
var
  interval, // scroll is being eased
  mult = 0, // how fast do we scroll
  dir = 0, // 1 = scroll down, -1 = scroll up
  steps = 50, // how many steps in animation
  length = 30; // how long to animate
function MouseWheelHandler(e) {
  e.preventDefault(); // prevent default browser scroll
  clearInterval(interval); // cancel previous animation
  ++mult; // we are going to scroll faster
  var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // cross-browser
  if(dir!=delta) { // scroll direction changed
    mult = 1; // start slowly
    dir = delta;
  }
  // in this cycle, we determine which element to scroll
  for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) {
    var oldScroll = tgt.scrollTop;
    tgt.scrollTop+= delta;
    if(oldScroll!=tgt.scrollTop) break;
    // else the element can't be scrolled, try its parent in next iteration
  }
  var start = tgt.scrollTop;
  var end = start + length*mult*delta; // where to end the scroll
  var change = end - start; // base change in one step
  var step = 0; // current step
  interval = setInterval(function() {
    var pos = Math.easeOutQuad(step++,start,change,steps); // calculate next step
    tgt.scrollTop = pos; // scroll the target to next step
    if(step>=steps) { // scroll finished without speed up - stop animation
      mult = 0; // next scroll will start slowly
      clearInterval(interval);
    }
  },10);
}

// nonstandard: Chrome, IE, Opera, Safari
window.addEventListener("mousewheel", MouseWheelHandler, false); 
// nonstandard: Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
})();

このデモでは を見るとわかるように、ぎくしゃくしたスクロールを避けるために、できる限り緩和しません。上記のコメントを読んで、プロジェクトに合った独自のスクロールを設計してください。

注：マウスホイールはタッチパッドにもフックしますが、上下キーにはフックしません。キーイベントもフックすることを検討する必要があります。

11
Jan Turoň

時間はあまりありませんでしたが、（ブラウザ間およびダーティな）スムーズなスクロール機能をその場で作成しようとしました。スクロールを停止すると、スムーズに減速します。ニーズに合うように、少し書き直すことができます。

ここで試してみてください：

スムーズなスクロール：

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    } else {
        var B = document.body; //IE 'quirks'
        var D = document.documentElement; //IE with doctype
        D = (D.clientHeight) ? D : B;
        return D.scrollTop;
    }
}

var timeouts = [];
var scrolling = false;
var scroller;
var scrollTop = getScrollTop();
var timeMs;
var alter = false;
var speed = 5;
window.onscroll = function() {
    if(alter) {
        var timeDif = new Date().getMilliseconds() - timeMs;
        speed = 5 - (timeDif / 50);
        console.log(speed);
    }
    timeMs = new Date().getMilliseconds();
    alter = !alter;
    var scrollDirection = getScrollTop() - scrollTop;
    scrollDirection = scrollDirection / Math.abs(scrollDirection);
    scrollTop = getScrollTop();
    clearTimeout(scroller);
    scroller = setTimeout(function(){
        console.log('smooth scrolling active');
        if(!scrolling) {
            timeouts.length = 0;
            scrolling = true;
            var steps = 50;
            var delay = 6;
            for(var i = 0; i < steps; i++) {
                (function(i){
                    var timeout = setTimeout(function(){
                        var perc = i / steps; 
                        var val = (perc == 1) ? 1 : (-Math.pow(2, -10 * perc) + 1); 
                        var scrollY = val * speed * scrollDirection;
                        window.scrollTo(0, getScrollTop() + scrollY);
                        setTimeout(function(){
                            if(i == (steps - 1)) scrolling = false;
                        }, steps * delay);
                    }, (i * delay));
                    timeouts.Push(timeout);
                })(i);
            }
        }
    }, 50);
};

http://jsfiddle.net/ubawR/4/

3
sjkm

for chromeこれのみ試してみてください- https://github.com/im4aLL/chromeSmoothScroll たった1 KB

2
HADI

Simplr-SmoothScrollには1つのバグがあります。ボディの高さが自動でない場合、ボディで動作しません。

私は別のプラグインを見つけ、それが私にとって完璧なソリューションになりました。 https://github.com/inuyaksa/jquery.nicescroll

ライブラリをダウンロード（ demo ）し、最初に追加

// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {  
    $("body").niceScroll();
});
1
BigMan

基本的にスクロールは、再描画とリフローのためにぎくしゃくします。これらのリフローをチェックして削減できる場合、スクロールのパフォーマンスが得られる可能性があります。

onScrollイベントコールバック関数をチェックして、高価なロジックを実行しているかどうかを確認します。また、メモリリークがあります。

Chrome開発者向けツールバーヒープスナップショットは、メモリリークの検出や、再描画やリフローの確認に役立ちます。

0
Kishorevarma

w3schoolsは、非常にシンプルなJQueryコードを提供して、すべてのアンカータグにスムーズなスクロール効果を与えています。

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

ここにデモがあります： https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

0
JerryGoyal