画面内のコンテンツのみを描画するJavaScript

Leave a reply
Bookmark this on Hatena Bookmark
LINEで送る

zenbackのようにコンテンツが画面内に来た際に描画を行うというスクリプトを勢いで書いたので、公開してみたいと思います。

コードは単純なスクリプトとして実装していますが、実際に使う場合にはjQueryプラグイン等にしてもう少し使いやすい形にしても良いかもしれません。ただ、あまり余計な処理を入れて肝心の処理速度を損なうのも嫌だったので今回はゴリっと実装しています。

広告

viewSelector, drawViewに関しては適当な値に書き換えてください。

$(function(){
        var $w = $(window);
        var $h = $('html,body');
        var offset = $w.height();
        function canDraw($target, info) {
                var top = $target.position().top;
                if (info.st - offset < = top && top <= info.st + info.wh + offset) {
                        return true;
                }
                return false;
        }
        function isFinish($target, info) {
                var top = $target.position().top;
                if (info.st + info.wh + offset < top) {
                        return true;
                }
                return false;
        }
        function updateView() {
                var viewSelector = 'INPUT SELECTOR';
                $views = $(viewSelector);
                if ($views.length==0) return;
 
                var sizeInfo = {
                        'st':$w.scrollTop(),
                        'wh':$w.height()
                };
                console.log('updateView: scrollTop='+sizeInfo.st+', windowHeight='+sizeInfo.wh);
                $views.each(function(){
                        var $self = $(this);
                        if (canDraw($self, sizeInfo)) {
                                console.log('view target='+$views.index($self));
                                drawView($self);
                        } else {
                                if (isFinish($self, sizeInfo)) {
                                        console.log('finish.');
                                        return false;
                                }
                        }
                        var top = $self.position().top;
                });
        }
 
        function drawView($target) {
		//FIXME implement.
        }
 
        updateView();
        $(window).scroll(updateView);
});

関連記事