仅限Chrome：滚动时覆盖div，并显示固定位置滚动问题 [英] Chrome only: Overlay divs on scroll with fixed position scrolling issue

问题描述

基于这个答案覆盖卷轴div 我试图做同样的效果。

当你滚动的部分被叠放在同一个地方时 - 一个叠在上面。

在Firefox上 - IE浏览器工作正常，但在Chrome浏览器上（最新版本 - 版本31.0.1650.63米），当您滚动时，下一张幻灯片开始显示正在重叠的部分内容正在反弹。

逻辑：

当下一张幻灯片/部分设置为 position：fixed;


基本html

 将被重叠的部分。 c $ c>< section class =section> 
< div class =section-inner> 
< div class =table-cell> 
< div class =container clearfix> 
 // conten与img等一起在这里
< / div> 
< / div> 
< img src =imgsrcclass =secondary-background-image> 
< / div> 
< / section> 
  

css：



  html，body {
 height：100％; 
保证金：0; 
 padding：0; 
} 
 body {
 overflow-x：hidden; 
} 
 .section {
 position：relative; 
 z-index：5; 
背景：#FFFFFF; 
} 
 .section-fixed {
 z-index：1; 
} 
 .section-inner {
 width：100％; 
 height：inherit; 
 display：table; 
} 
 .section-fixed .section-inner {
 position：fixed; 
 top：0; 
剩下：0; 
 z-index：2; 
} 
 .table-cell {
 width：100％; 
 display：table-cell; 
 vertical-align：middle; 
 height：inherit; 
} 
 .section .secondary-background-image {
 position：absolute; 
 bottom：0; 
剩下：0; 
} 
 .container {
 position：relative; 
 width：700px; 
 margin：0 auto; 
 padding：0; 
} 
 .clearfix：before，.clearfix：after {
 content：; 
 display：table; 
} 
 .clearfix：在{
 clear：both; 
} 
  

基本js：



  $（function（）{
 
 //设置变量
 var _window = $（window），
 panels = $ （'.section'），
 winH = _window.height（）; 
 panelsY = []; 
 
 
 //每个面板的缓存位置
 $ .each（panel，function（i，el）{
 $（this）.css（'height'，winH）; 
 panelsY.push（panels.eq（i）.offset（） （）函数（）{
 updateWindow（）;}}; 
}）; 
 
 //将函数绑定到窗口滚动
 _window.bind ; 
}）; 
 
 //更新窗口
函数updateWindow（）{
 var y = _window.scrollTop（）; 
 
 //通过我们的面板位置循环
 for（i = 0，l = panels.length; i  / * 
首先，如果我们检查我们的最后一个面板，
，否则我们会比较他的位置n在
两个面板之间
 * / 
 if（（i === l  -  1）|| （y> = panelsY [i]&< y< = panelsY [i + 1]））{
 break; 
} 
}; 
 $ b $ //更新类
 panels.not（'：eq（'+ i +'）'）。removeClass（'section-fixed'）; 
 panels.eq（i）.addClass（'section-fixed'）; 
}; 
 
}）; 
  

以简单文本作为内容的工作文件 http://jsfiddle.net/amustill/wQQEM/

jsfiddle文件正在运行因为布局非常简单，divs没有屏幕的高度。在我的网站，我猜是因为divs需要屏幕的高度，而且我有很多图像，文本等问题发生。

因此，问题发生在该部分采用类部分固定并且部分内部部分的位置设置为固定的时刻。

编辑

我也让nicescroll.js使滚动更平滑一些。问题仍然存在，但'平滑'。

解决方案

确保所有职位都到位的JavaScript直到用户开始滚动后才运行。所以会发生什么，他们开始滚动，然后JavaScript运行，把一切都放回原处。这是创建弹跳效果的原因。

为了解决这个问题，只需确保在用户有机会之前滚动事件一经运行

JS：

  / * ... * / 
 
 //将函数绑定到窗口滚动
 _window.bind（'scroll' ，function（）{
 updateWindow（）; 
}）; 
 
 //调用事件以确保所有内容都已设置
 _window.scroll（）; 
  

您也可以运行updateWindow（）函数，但是我无法测试因为该功能在浏览您的网站时未被暴露。

编辑：

看起来您可能会要谈的不仅仅是第一部分的反弹。当我滚动浏览时，我几乎感觉不到任何其他部分的弹跳，而且我怀疑你的用户是否也会这样做。但是，如果这是一个问题，它看起来是由于在chrome中触发scroll（）事件导致一些低效率而导致的。这个答案可能会为你在那里提供一些启示： https://stackoverflow.com/a/11039468/1824527

Based on this answer Overlay divs on scroll I am trying to do the same effect.

As you scroll the sections are being overlayed in the same place-- one stacked on top the next.

On firefox - IE is working fine but on chrome (last version - Version 31.0.1650.63 m) when you scroll and the next slide start to coming the content of the section, that being overlapped, are being bounced.

The logic:

When the next slide/section is coming set position:fixed; to the section that will be overlapped.

The base html

<section class="section">
    <div class="section-inner">
        <div class="table-cell">
            <div class="container clearfix">
                //conten goes here with img etc.
            </div>
        </div>
        <img src="imgsrc" class="secondary-background-image">
    </div>
</section>

The css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    overflow-x: hidden;
}
.section {
    position: relative;
    z-index: 5;
    background: #FFFFFF;
}
.section-fixed {
    z-index: 1;
}
.section-inner {
    width: 100%;
    height: inherit;
    display: table;
}
.section-fixed .section-inner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.table-cell {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: inherit;
}
.section .secondary-background-image {
    position: absolute;
    bottom: 0;
    left: 0;
}
.container {
    position: relative;
    width: 700px;
    margin: 0 auto;
    padding: 0;
}
.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}

The base js:

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.section'),
        winH = _window.height();
        panelsY = [];


    // Cache position of each panel
    $.each(panels, function(i, el) {
        $(this).css('height', winH);
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function() {
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /* 
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('section-fixed');
        panels.eq(i).addClass('section-fixed');
    };

});

A working file with a simple text as content http://jsfiddle.net/amustill/wQQEM/

The jsfiddle file is working in chrome because the layout is very simple and the divs don't have the height of the screen. In my site I guess because the divs takes the height of the screen and I have a lot of images , text etc the issue occurs.

So the issue occures the moment the section takes the class section-fixed and the position of section-inner is being set to fixed.

EDIT

I put nicescroll.js also to make the scroll a bit smoother. The problem still occurs but 'smoother'.

解决方案

The javascript that makes sure that all of the positions are in place doesn't run until after the user has started scrolling. So what happens is that they start scrolling and then the javascript runs, putting everything back into place. This is what creates the bouncing effect.

To fix it just make sure that the scroll event runs as soon as you have attached the scroll event, before the user has a chance to scroll themselves.

This really is simple enough:

JS:

/* ... */

// Bind our function to window scroll
_window.bind('scroll', function() {
    updateWindow();
});

// Call the event to make sure everything is set
_window.scroll();

You could probably just run the updateWindow() function too, but I wasn't able to test that as the function wasn't exposed when looking at your site.

Edit:

It looks like you might be talking about more than the the bounce that occurs with the very first section. I can hardly perceive bouncing on any of the other sections as I scroll through, and I doubt your users will either. However, if it was a problem it looks to be caused by some inefficiency with the firing of the scroll() event in chrome. This answer might shed some light for you there: https://stackoverflow.com/a/11039468/1824527

这篇关于仅限Chrome：滚动时覆盖div，并显示固定位置滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！