ブログ/お知らせ Knowledge

jqueryでマウススクロールのスピードを調整する

コーディング

2017.11.03

スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。
スクロールのスピードを調整すると文章をじっくり読ませることができます。

コピペして使えるjquery

            $(function () {
                scrLength = 150;
                scrSpeed = 600;
                scrEasing = 'easeOutCirc';

                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;
                    }
                    $('html,body').stop().animate({
                        scrollTop: scrSet
                    }, scrSpeed, scrEasing);
                    return false;
                });
            });