1

私の主な目的は、プロジェクトの div をスクロールさせずに、作成時に Web ページ全体をスクロールさせることです。次に、プロジェクト div をウィンドウの中央に配置して、任意の量のピクセルをスクロールすると、スクロールできるのはプロジェクト div だけになります。main_content div が修正され、その最上位が 0 から変更されると、2 つの問題が発生します。

1) スクロール中にカーソルが画面の中央にあると、画面が点滅します。( -webkit-backface-visibility: hidden; を css シートに追加して、これを修正しようとしましたが、それでも少し点滅します)

2) スクロール中にカーソルが黒く表示され、固定クラスが main_content に追加されている場合、ページはそのままではなくジャンプします。これはクロムではなく、サファリだけです。

写真 - http://farm4.staticflickr.com/3793/9293713553_ee3baf8d9d_b.jpg

ここにフィドルがありますが、サファリが私に与えているエラーは発生しません。http://jsfiddle.net/chongwaldo/6mkDS/

HTML

<!DOCTYPE html>
    <html>
        <head>
            <link href="Scrolling_Test.css" rel="stylesheet">
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type='text/javascript' src='Scrolling_Test.js'></script>
        </head>

        <body>
            <div class="main_content">
                <div class="black top">
                </div>

                <div class="projects">
                    <div class="window project_1">
                    </div>
                    <div class="window project_2">
                    </div>
                    <div class="window project_3">
                    </div>
                </div>

                <div class="black bottom">
                </div>
            </div>
        </body>
    </html>

CSS

html, body {
    margin:0px;
    -webkit-backface-visibility: hidden;
}

div {
    width:100%;
    -webkit-backface-visibility: hidden;
}

.main_content {
    position:absolute;
    top:0;
    left:0;
}

.black {
    background-color:#000;
    height:800px;
}

.fixed {
    position:fixed !important;
    top:0;
    left:0;
}
.scroll {
    overflow:scroll !important;
}

.projects {
    height:700px;
    overflow:hidden;
}

.window {
    height:700px;
}

.project_1 {
    background-color:#addfe7;
}
.project_2 {
    background-color:#b0e8e6;
}
.project_3 {
    background-color:#b9eadd;
}

jQuery

$(document).ready(function() {

    var $window = $(window), // Cache the window object
        stopLine = 550,
        dir = 'down', // direction
        lastScroll = 0;

    $('.window').text(dir);

    // Execute when window scrolls
    $(window).scroll(function(){ // scroll event
        var fromTop = $window.scrollTop();

        $('.window').text(dir);
        $('.window').append('<br/>'+fromTop);

        // Get scrolling direction
        if(fromTop > lastScroll){ dir = 'down'; }
        else { dir = 'up'; }

        // Set new lastScroll value
        lastScroll = fromTop;

        if( dir === 'down' &&
            fromTop >= stopLine){

            $('.main_content').addClass('fixed');
            $('.projects').addClass('scroll');

            $('.fixed').css({
                'top': -stopLine
            });


        } else {

        }

    });

});
4

1 に答える 1

1

スクロール イベント ( $(window).scroll(function(){}); ) のコードが原因で、ページがジャンプしていました。

  1. $('.main_content').addClass('fixed'); 固定クラスの「トップ」値は 0 から始まります。
  2. $('.fixed').css({ 'top': -stopLine }); 「top」値は -stopLine 値に変更されます。

これらのコードはどちらも、次のスクロール イベントが呼び出される前に発生するため、複数のスクロール イベント(連続スクロール)をトリガーすると、ユーザーはウィンドウ内でジャンプします。ページは top:0 で固定され、次のスクロールの前に top:-stopLine に移動します。

上部のこのジャンプを相殺するために、ページに scrollTop() を追加して、スクロールが続行する前にウィンドウが均一になるようにしました。

この$('html, body').scrollTop( stopLine )は、css に-webkit-backface-visibility: hiddenを追加すると、点滅とジャンプが停止します。

jsfiddle - http://jsfiddle.net/chongwaldo/mmdDD/

JQueryを追加

 // Block must stay in order
 //###################################
 /*(1)*/$('.main_content').addClass('fixed');
 /*(2)*/$('.projects').addClass('scroll');
 /*(3)*/$('.fixed').css({
    'top': -stopLine
 });
 /*(4)*/$('html, body').scrollTop(
    stopLine
 );
 //###################################
于 2013-07-25T21:12:34.587 に答える