调整窗口大小会导致下一个 div 显示在响应式水平滚动网站中答案

【问题标题】：Resizing window causes next div to show in responsive horizontal scrolling website调整窗口大小会导致下一个 div 显示在响应式水平滚动网站中
【发布时间】：2013-04-30 13:22:44
【问题描述】：

网站在所有分辨率下都可以正常显示，调整窗口大小时会出现问题。

所以我所做的是创建 5 个 div 容器，并在 500% 宽度的主体内给每个容器 20% 的宽度。以下是其中之一

 <div id="workslide" class="container"> 
 //some a tags goes here
 </div>

CSS

.container {
     bottom: 0;
     float: left;
     height: 100%;
     margin: 0;
     position: relative;
     width: 20%;
}

在每个容器中都有一个 img 幻灯片，它设置在 css background-size: contain; 中，可以针对所有分辨率正确缩放。例如，当窗口从左侧调整大小时，就会发生这种情况。以前的 div 流血：

任何想法都将不胜感激！

【问题讨论】：

我刚才注意到一个类似的问题：stackoverflow.com/questions/16403507/…
通过百分比宽度起作用的响应式滑块非常有问题。使用 jquery 滑动到具有left px 值的适当幻灯片要可靠得多。
真的吗？如果它没有响应，它可能看起来更糟，所以宁愿解决这个问题。使用 jQuery.animate() 滚动正文；工作正常。在上面的示例中，下一个 div 将正确对齐和缩放。
浏览器调整大小后，是否更新滑块的滚动位置？如果没有，请参阅@isherwood 提到的问题的以下答案：stackoverflow.com/a/16406142/1306809
我明白了，我会在文件准备好后立即尝试$(this).scrollLeft(offset().left); 之类的东西

标签： javascript jquery css resize responsive-design

【解决方案1】：

我在 Matt 的指针之后对问题进行了修复。现在完美运行：

//added following lines of code within document ready:
$(window).resize(function() {
$(window).scrollLeft($(/*element you have scrolled to*/).offset().left);
});

【讨论】：