Question

我有一堆100％宽度的div，它们在调整浏览器窗口大小时保持其形状/比例。我的问题是：如果我已经向下滚动到底部div（本例中为黄色），那么我调整浏览器窗口的大小，我最终会看到一个不同的div，因为他们正在保持他们的比例。有没有办法阻止这个？

http://jsfiddle.net/nWrVY/

CSS：

.wrapper {
    width: 100%;
    display: inline-block;
    position: relative;
}
.wrapper:after {
    padding-top: 161.8%;
    display: block;
    content:'';
}

HTML：

<body>
    <div class="wrapper" style="background-color: red;"></div>
    <div class="wrapper" style="background-color: black;"></div>
    <div class="wrapper" style="background-color: green;"></div>
    <div class="wrapper" style="background-color: yellow;"></div>
</body>

Answer 1

您可以通过几个步骤在javascript中解决此问题。

var current = "";

function scroll(){
// add 20 pixels to the scroll top so after we scrolled it does't fallback to the div before the one we're actually at.
    var scrolltop = $(document).scrollTop() + 20;
    $(".wrapper").each(function(){
// check if the offset of all divs is smaller than the scroll top
// the last one found is the last one visible
// save that one to a global variable so the resize function an access it
        if($(this).offset().top < scrolltop) current = $(this);
    })
}

function resize(){
// here we apply the top of the div to the body as scroll top 
   $("body").stop().animate({scrollTop:current.offset().top+"px"});
}

$(window).resize(resize);
$(document).scroll(scroll);

[编辑]我修改了代码以使其更加准确（我在滚动顶部添加了20个像素，因此重新定义当前元素并不重新定义它作为元素ABOVE它）。这需要jQuery，所以添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

对于您的部分，这应该有效，我在小提琴上进行了测试。

调整具有比例响应div的页面大小时保持查看位置

1 个答案: