滑らかなスクロールを実現する3つの方法

マウスホイールでスクロールする際にデフォルトのスクロールでなく、滑らかなスクロールにする方法を紹介します。
最初の方法は実装は簡単なんですが、少しがたつきます。最後に紹介するのはすごく実装は少しややこしいのですが、すごく滑らかなスクロールを行えるので是非最後まで読んでください。

mousewheelイベント + animate

mousewheelイベントとjQueryのanimate、またはvelocityで滑らかなスクロールを実現します。
スクロールイベントが発生するごとにアニメーションを行っています。
スクロールイベントはそんなに発生回数が多くないので、アニメーションもがたついてしまいます。

var scrLength = 150;
var scrSpeed = 500;
var scrEasing = 'linear';

var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
	e.preventDefault();
	var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
	if (delta < 0){
		scrSet =  $(document).scrollTop()+scrLength;
	} else {
		scrSet =  $(document).scrollTop()-scrLength;
	}
	var scrSec = scrSet + "px"
	$("html").stop().velocity("scroll", { offset: scrSet, mobileHA: false, easing: scrEasing });
	$('html,body').stop().animate({scrollTop:scrSet},scrSpeed,scrEasing);
	return false;
});

プラグイン skroller.js

プラグインを使います。実装はさきほどと同じですが、その他の機能が備わっているのでこちらもおすすめです。

scrollイベント + frame + tweenmax(translated)

これははじめ見たとき衝撃でした。
position: fixedと absoluteを使って新たなwindowを生み出すイメージですね。
fixedをwindowとしabsoluteの要素をtranslatedで -(マイナス)方向に移動させます。
スクロールイベントに対してframeでアニメーションを行うので、mousewheelだけでなくページ内リンクや直接スクロールバーを動かしたりした場合にも滑らかなアニメーションを行います。

この実装の注意点はfixedしたい要素は外にscroll要素外に出してやる。
scroll内にfixedしたい要素がある場合は同様にtweenmaxのアニメーションを行ってやる。
ことがポイントです。

実際にやってみたらわかるんですが、scroll内でfixedを行った場合は少しずれてついてきます。
またIEとfirefox,chromeとでfixedの解釈が違うので内部でfixedは使わないほうがいいです。
fixedの動きを実現したい場合はabsolute + tweenmaxで +方向に動かします。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD