マウススクロール処理対策(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 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です