Question

在尝试使用视差滚动创建单页模板时，我发现了奇怪的问题。我怀疑问题出在jQuery部分，甚至可能是自己的CSS，但我不太确定。

我当前的jQuery代码位读取访问者浏览器的窗口大小，并调整每个不同锚定页面的幻灯片高度。这样，无论窗口大小如何，我都可以完成背景。但同时我意识到如果我添加不同的CSS组件，它们将不会扩展活动的锚背景高度，而是会溢出到另一张幻灯片上。

这是负责幻灯片高度的jQuery部分

 $(function () {
     $('.windows').css({
         'height': (($(window).height())) + 'px'
     });

     $(window).resize(function () {
         $('.windows').css({
             'height': (($(window).height())) + 'px'
         });
     });

 });

这是网站网址https://docstax.net/esgh/

转到计划并调整浏览器大小，您将看到我的意思是不根据内部所需的高内容调整幻灯片的高位。

编辑：正如putvande所建议的，那里有许多我知道的$（窗口）的方法，我做了更新并最小化了代码。

Answer 1

基本上，如果内容对于容器来说太大，您不希望手动将高度组件添加到div。以下是我认为可行的方法：

   $(window).bind("load", function()                                                                                                                                                                                        
     {                                                                                                                                                                                                                 
         var windowHeight = $(window).height();                                                                                                                                                                        
         $('.windows').each(function(index) {                                                                                                                                                                          
           if ($(this).height() < windowHeight) {                                                                                                                                                                      
             $(this).height(windowHeight);                                                                                                                                                                             
           }                                                                                                                                                                                                           
         }); 
         $(window).resize(function() {
            var windowHeight = $(window).height();                                                                                                                                                                        
            $('.windows').each(function(index) {                                                                                                                                                                          
               if ($(this).height() < windowHeight) {                                                                                                                                                                      
                  $(this).height(windowHeight);                                                                                                                                                                             
                }                                                                                                                                                                                                           
            });
          });
      });

Answer 2

您可以尝试这样：

<script type="text/javascript">
$(function(){
    var height = window.innerHeight;
    $('.windows') .css({'height': height+'px'});
    $(window).resize(function() {
        var reheight = window.innerHeight;
        $('.windows') .css({'height': reheight+'px'});
    });
});
</script>

Answer 3

我试过你的页面，我没有看到问题：这些部分按其应有的大小调整。显示内容时应考虑应用的样式。当某个部分小于其内容时，该内容会在其他页面上开始流血。完全正常。您可以在overflow: hidden;上设置.windows，以防止发生这种情况和/或使用媒体查询来调整内容的大小。

顺便说一句，这是一个更轻松的功能，只需编辑你的代码：

$(function() {
    $(window).resize(function() {
        $('.windows').css({ 'height': $(window).height() });
    }).resize();
});

无需编写代码两次：设置调整大小处理程序并手动触发它应该这样做。写一次，所以当你需要改变它时，你只需要改变它一次。您还可以在调整大小处理程序中重置de scrollTop，以便将焦点保持在页面的相同部分。

窗口大小jquery bug

3 个答案: