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

【问题标题】：How do you stop a single-page site from automatically scrolling when resizing the browser?调整浏览器大小时如何阻止单页网站自动滚动？
【发布时间】：2014-03-09 14:43:29
【问题描述】：

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

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

【问题讨论】：

能否请您重新表述您的问题，以便可以理解 - 谢谢！（网页）页面是一个页面。你的页面上有不同的部分。每个都应该是 100% 的宽度和高度（那么为什么要浮动它们）？那么在调整视口大小时，您的问题到底是什么？您想实现什么目标？
@Netsurfer 基本上它是一个包含 3 个部分的单页网站，当您导航到最后一部分（底部页面）并将浏览器调整为较小的屏幕时，它很好，但是当您将其滚动回原始（或增加浏览器）页面自动向上滚动到网页中间（奇怪）我的问题是我如何确保当我将其调整回原始大小时它仍然应该在同一部分而不是一半（由于自动向上滚动）。
我猜这是因为元素高度实际上并没有在窗口调整大小时更新。这发生在任何浏览器中，还是仅在 Safari 中？顺便说一句：尝试删除（不必要的）浮动，看看它是否仍然发生！
@Netsurfer 发生在 chrome 和 safari 中:(
查看JSFiddle

标签： html css

【解决方案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

【讨论】：

你是什么类型的滚动，你在什么电脑和浏览器上
当我调整它的大小（变小）它很好，但是当我尝试将它调整回全屏时，它会自动向上滚动页面
我使用的是新的 Retina mac book pro，我主要使用 chrome 而不是 safari。像我这样的其他页面似乎很好，但我的页面混乱

【解决方案2】：

在 cmets（关于问题）中找到问题后，我也会将其添加为答案，以便任何人都可以轻松找到它。

适用于 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

希望这对将来的某人有所帮助！

【讨论】：