html - 调整浏览器大小时如何阻止单页站点自动滚动？

Question

所以基本上我有一个正在处理的单页网站，并且到目前为止我已经取得了进展，直到我遇到了这个愚蠢/烦人的错误。调整大小时，首页不会自动滚动，但其他页面会自动滚动:这是我的 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>

当你向下滚动到最后一页并尝试调整它的大小时，它会自动向上滚动页面，你如何解决这个问题？非常感谢!!!

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