窗户加载vs调整不同的宽度

windows.onload vs resize different width

本文关键字：加载 vs 调整 窗户      更新时间：2023-09-26

我需要根据窗口宽度调整几个元素的宽度和高度。所以我使用

window.onload = function() {
    slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);

调用我的函数

调整窗口大小后，所有内容都正确显示-但不是onload。我猜这和window-width-value有关。

所以，我打印窗口的宽度值，并识别- onload -我的窗口宽度有一个值'x'，当我调整1px左右的窗口宽度值'x'增加/减少+/- 18px。

我认为这导致了我的网站的问题。有人知道原因吗?有人知道解决办法吗?那太好了!

编辑

并不是说onload不起作用。这只是错误的值，它似乎得到当它读取窗口宽度

你可以这样做:

$(window).on('load resize',function(){
   slideSizeUpdate();
}).resize(); // trigger resize when page is loaded

考虑这个场景:

  • 部分内容通过CSS隐藏。结果页面很短，不需要水平滚动条。
  • 计算load事件的窗口宽度，此时滚动条不存在。
  • 你取消隐藏的内容，现在页面是高的，需要水平滚动条。
  • 在你没有注意到的情况下，窗口的宽度减少了17px(滚动条的通常宽度)。

如果是这种情况，那么一个解决方案是使用CSS强制窗口水平滚动条。你可以使用以下(尽管我建议在StackOverflow上搜索更多):

html {
    overflow-y: scroll; 
}
相关文章：