【JavaScript】要素をスクロールするオブジェクト

2018年9月12日
JavaScript

要素をスクロールする処理を一般化し、オブジェクトにしてみた。「ページトップへ移動するボタン」や「目次」などに使える。

サンプル

コード

function Scroller( target, speed, interval ) {
    const   _MAX_POSITION   = target.scrollHeight - target.clientHeight;
    let     _timeoutId      = null;

    function _scrollByPosition( position ) {
        if ( _timeoutId !== null ) return;

        let currentPosition = target.scrollTop;
        if ( position > _MAX_POSITION ) position = _MAX_POSITION;
        
        const   DIRECTION   = position < currentPosition ? -1 : 1;
        const   MOVEMENT    = speed * DIRECTION;

        const onScroll = function() {
            currentPosition += MOVEMENT;

            const IS_COMPLETED =
                ( DIRECTION ===  1 && currentPosition >= position ) ||
                ( DIRECTION === -1 && currentPosition <= position )
            ;

            if ( IS_COMPLETED ) {
                target.scrollTop = position;
                _timeoutId = null;

                return;
            }

            target.scrollTop = currentPosition;
            _timeoutId = setTimeout( onScroll, interval );
        };

        onScroll();
    };

    function _scrollByElement( element ) {
        const POSITION = element.offsetTop;

        _scrollByPosition( POSITION );
    }

    return {
        scrollByPosition: _scrollByPosition,
        scrollByElement : _scrollByElement,
    };
};

使い方

まず、Scrollerオブジェクトをインスタンス化する。このとき、引数として「スクロールしたい要素」・「スクロールの速度( スクロールの間隔が来るたびに要素に加算されるpx )」・「スクロールの間隔( ms )」を指定する。

const SCROLLER = new Scroller( document.documentElement, 70, 15 );

続いて、Scrollerのインスタンスから使用したいメソッドを呼び出す。

// 特定の位置までスクロールしたい場合
SCROLLER.scrollByPosition( 200 );

// ある要素の位置までスクロールしたい場合
const ELEMENT = document.getElementById( 'element' );
SCROLLER.scrollByElement( ELEMENT );

これでスクロールしたい要素を特定の位置へスクロールできる。