Javascript 绝对定位的视差元素导致页面高度过大_Javascript_Jquery_Html_Css

Javascript 绝对定位的视差元素导致页面高度过大

javascript jquery html css

Javascript 绝对定位的视差元素导致页面高度过大,javascript,jquery,html,css,Javascript,Jquery,Html,Css,编辑：这是另一把小提琴，它准确地显示了问题的发生。在我看来，由于bg部分位于容器内部，溢出隐藏应该是隐藏它：我已经为我的客户站点实现了一个自定义视差滚动解决方案。我在问题的底部加入了相关的片段。由于该站点是一个完整的Ajax页面，因此背景必须与最高的页面一样高，在本例中，最高的页面就是主页。当浏览主页时，所有的工作都如预期的那样，因为所有的部分都被安排成适合这个高度的页面。但是当用户导航到另一个明显较短的页面时，问题就出现了：用户可以滚动页面高度的10倍，因为认为它必须滚动到视差块，而实际上我

编辑：这是另一把小提琴，它准确地显示了问题的发生。在我看来，由于

bg

部分位于

容器

内部，溢出隐藏应该是隐藏它：

我已经为我的客户站点实现了一个自定义视差滚动解决方案。我在问题的底部加入了相关的片段。由于该站点是一个完整的Ajax页面，因此背景必须与最高的页面一样高，在本例中，最高的页面就是主页。当浏览主页时，所有的工作都如预期的那样，因为所有的部分都被安排成适合这个高度的页面。但是当用户导航到另一个明显较短的页面时，问题就出现了：用户可以滚动页面高度的10倍，因为

认为它必须滚动到视差块，而实际上我只希望它滚动到

的内容。我尝试了各种组合的

溢出：滚动

和

：隐藏

，但都没有成功

下面是我想象中应该发生的事情，但似乎因为在这个例子中，

\parent

是生产站点中的

，而

\container

是

，所以有些东西坏了。也就是说，因为我这样做需要

溢出：隐藏

，所以它会删除生产站点中的所有滚动条，因为我正在制作

具有

溢出：隐藏

在我看来，蓝色的

绝对位于滚动区域之外，因此不应影响

#容器的高度
由于生产站点的beta版已经启动，我将提供一个链接，指向显示问题的其中一个页面，以防我的描述不清楚：
问题是：如何保留视差背景，但控制页面的高度，使其仅滚动到页面内容的高度
总结执行情况：
<body>
    //here are the parallax pieces, with various hooks for the js that control them
    <section id="bckgrnd1"></section>
    <section id="bckgrnd2" data-type="background" data-speed="6"></section>
    <section id="bckgrnd3" data-type="background" data-speed="5"></section>

    <div id="body_container">
        //actual page content
    </div
</body>

最后是完成所有工作的js：
$(document).ready(function(){
    $("html").css("background-image","none");
    $("section").show();
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object 

        $(window).scroll(function() {
            var yPos = -($(window).scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = yPos + 'px';

            // Move the background
            $bgobj.css({ top: coords });
        }); 
    });    
});

// Create HTML5 elements for IE

document.createElement("article");
document.createElement("section");

对于那些能够理解我的曲折和复杂问题的人，以及那些有类似问题的人，这里是发生了什么
，因为它们被用作视差卷轴的背景图像容器，所以它们被绝对定位在流之外。由于它们的容器是
，因此它们被视为页面的一部分，因此即使在
上设置了溢出：隐藏，它们也不会被视为溢出，因此用户可能会在页面上向下滚动太远。解决方案是将所有
包含在一个div中，然后除了
之外，还设置该div的高度。结果正是您所期望的：用户只能向下滚动到设置的高度，这完全是您想要的。
信息太多了。我会使用简化的JSFIDLE并尝试解决其中的一个问题。但问题是，我不明白为什么在简单的FIDLE中，绝对定位元素不会导致容器扩展，而在我的生产站点中，它会导致容器扩展。我认为这与我的容器是这一事实有关，但我不确定，因此我提供了可能需要的所有信息，以便有人能够找到答案。我的评论旨在为您提供更好的帮助。这个问题不太可能得到任何回应，因为问题有点复杂，摆在大家面前的情况太复杂了。我会把你的问题简化很多，类似于你在回复我的评论中所写的。一旦你发现了什么，如果你仍然需要帮助，开始另一个问题。这种格式在S.O.非常有效。
$(document).ready(function(){
    $("html").css("background-image","none");
    $("section").show();
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object 

        $(window).scroll(function() {
            var yPos = -($(window).scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = yPos + 'px';

            // Move the background
            $bgobj.css({ top: coords });
        }); 
    });    
});

// Create HTML5 elements for IE

document.createElement("article");
document.createElement("section");