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

Question

The website displays fine on all resolutions, the problem arises when the window is resized.

So what I have done is create 5 div containers and given each container 20% width within a body of 500% width. Below is one of them

 <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%;
}

Within each container is an img slide which is set in css background-size: contain; which scales correctly for all resolutions. When the window is resized from the left, for example, this happens. The previous div bleeds in :

Any ideas would be appreciated !

Answer 1

I implemented a fix for the problem after the pointer from Matt. Works perfect now:

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