Question

所以基本上我有一个单页网站我正在努力并且已经取得了进展到目前为止我遇到了这个愚蠢/烦人的bug。当您调整大小时，首页不会自动滚动，但其他人会这样做：继承我的CSS

 body, html {
  height: 100%;
  margin: 0;
}

* {
    box-sizing: border-box;
    /* look this up */
}

.container {
    width: 100%;
    float: left;
    text-align: center;
    padding: 1em;
    height: 100%;
}


.mainPage {
float:left;
height:100%;
width:100%;

background: url(Imgs/13.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


/*
background-size:100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
*/

}

.projectContents {

float:left;
height:100%;
width:100%;
background: white;

}

.musicContent {

float:left;
height:100%;
width:100%;
background: url(Imgs/10.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


}

我的HTML：

<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = "container projectContents" >
</section>

<section  id = "musicContent" class="container musicContent" >
</section>

当您向下滚动到最后一页并尝试调整其大小时，它会自动向上滚动页面，您如何解决此问题？谢谢你！@ / p>

Answer 1

当我尝试它时，虽然解决这个问题的方法不是javascript或jquery：

var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
document.resize = function() {
    top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    left = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
    window.scrollTo(left, top);
};

JSFiddle

Answer 2

在评论中找到问题后（在问题上）我会将其添加为答案，所以任何人都可以轻松找到它。

适用于Mac / iOS的Safari（和Chrome）似乎在重新绘制/重新绘制页面方面存在“困难”。

解决此问题的一种方法是在windows的resize事件上使用JS事件处理程序。然后，此处理程序调用一个函数，该函数在需要重新绘制的元素上添加和删除样式属性。

使用风格属性绝对至关重要。在所有其他方法中，元素不会重新绘制！

这是JS代码（使用jQuery）：

if (window.addEventListener) {
    window.addEventListener('resize', triggerRepaint, false);
}

function triggerRepaint() {
    $('.container).attr('style', 'display:none;').attr('style', 'display:block;');
}

请参阅JSFiddle

希望这可以帮助将来的某个人！

在调整浏览器大小时，如何阻止单页网站自动滚动？

2 个答案: