【问题标题】：jquery mixed scrolling problemsjquery混合滚动问题
【发布时间】：2013-07-30 02:53:38
【问题描述】：

我的主要目标是让整个网页在创建时滚动，而不允许项目 div 滚动。然后，一旦您滚动任意数量的像素，将项目 div 居中在窗口上，您唯一可以滚动的是项目 div。当 main_content div 变得固定并且它的顶部位置从 0 更改时，我遇到了 2 个问题。

1) 如果我在滚动时光标位于屏幕中间，屏幕会闪烁。（我已经尝试通过添加来解决这个问题 -webkit-backface-visibility：隐藏； 到 css 表，但它仍然会闪烁一点）

2) 如果在滚动时，您的光标是黑色的，而固定类被添加到 main_content，则页面会向上跳转而不是原地不动。这不会发生在我的 chrome 中，只是 safari。

照片 - http://farm4.staticflickr.com/3793/9293713553_ee3baf8d9d_b.jpg

这是一个小提琴，但它不会产生 safari 给我的错误。 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 {

        }

    });

});

【问题讨论】：

标签： jquery safari scroll positioning css-position

【解决方案1】：

由于滚动事件中的代码（$(window).scroll(function(){});），页面正在跳转。

$('.main_content').addClass('fixed'); 固定类中的 'top' 值从 0 开始。
$('.fixed').css({ 'top': -stopLine }); 'top' 值更改为 -stopLine 值。

因为这两段代码都发生在下一个滚动事件被调用之前，所以当触发多个滚动事件时，用户会体验到窗口中的跳转（连续滚动）。页面固定在 top:0，然后移动到 top:-stopLine，都在下一次滚动之前。

为了抵消顶部的这种跳跃，我只是在页面中添加了一个 scrollTop()，以便在滚动继续之前窗口变得均匀。

这个，$('html, body').scrollTop( 停止线 )，在 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
 );
 //###################################

【讨论】：