カテゴリー別アーカイブ: jQuery Plugin

スクロールの挙動調整

今回は scroll の挙動調整です。
具体的には、通常 scroll した場合に縦方向 scroll する処理を
横向きに scroll するように変更してしまおうと云うものです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="./jquery.mousewheel.min_.js"></script>


        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 1000;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollLeft = $('body').scrollLeft() + tempSpeed;
                    } else {
                        scrollLeft = $('html').scrollLeft() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollLeft: scrollLeft}, 'normal');
                    // scroll out
                    return false;

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin     : 10px;
            }

            #main_area div {
                float            : left;
            }

            #scroll_area {
                width            : 4500px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="scroll_area">
                <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg12.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg13.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg14.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg15.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg17.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg18.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg19.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg20.jpg"></div>
            </div>

        </div>
    </body>
</html>

sample

sample を開き scroll してみると横に scroll して動くかと思います。
 ※ 内容自体は以前に行った内容とあまり変わりません(笑)

最近は、今までのような page が縦に scroll するだけでは無い site が増えています。
通常とは異なり、scroll をこちらで制御できるため、画面内容によって scroll の
移動距離を変えるなど、ちょっと変わった印象を持たせることも可能かと思います。

scroll bar を非表示にすることで scroll による紙芝居のような表示をすることが
可能になるのかと思います。
これでちょっと変わった印象を持たせられるのでは無いでしょうか。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

マウススクロール処理対策(chrome対応)

最近は 1ページが長いページが多いですね。
その中でページでの scroll について事前調査をしてみます。

内容としては chrome の時だけ scroll がガタツクようです。
う~ん、さすが chrome というべきか・・・
 # ちなみに私のメインブラウザは chrome です(笑)

■ 標準のページ

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample0

sample0 にて scroll すると確かにカクツキますね・・・
さすが chrome です。確かに綺麗なデザインの場合にはちょっと残念かもしれません。
何とかしないと行けません。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script src="./jquery.mousewheel.min_.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 100;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollTop =  $('body').scrollTop() + tempSpeed;
                    } else {
                        scrollTop =  $('html').scrollTop() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollTop: scrollTop}, 'normal');
                    // scroll out
                    return false;

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample1

sample1 にて scroll するとカクツキがましになったのではないでしょうか。
ちなみに「var baseSpeed = 100;」の数値を変えると1回の scroll にて動く
幅は大きくなりますがもう少しスムーズにもなります。

ただ、今回の要求仕様ではそれもだめです。
もう少しスムーズにする方法を考えないと行けませんね・・・
とりあえず基本は出来ましたので、これで進めていこうかと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。