Fatal编程技术网
  • javascript/
  • Javascript scrollTop损坏：车身高度100%，自动溢出

Javascript scrollTop损坏：车身高度100%，自动溢出

javascript html css

Javascript scrollTop损坏：车身高度100%，自动溢出,javascript,html,css,overflow,scrolltop,Javascript,Html,Css,Overflow,Scrolltop,我正在制作一个布局如下的网站： <html> <head></head> <body> <div id="left"></div> <div id="main"></div> </body> </html> CSS的其余部分并不是很重要，但请放心，我已经清除了浮动，等等。布局看起来完全符合我的要求 提供的CSS的目的是使

我正在制作一个布局如下的网站：

<html>
    <head></head>
    <body>
        <div id="left"></div>
        <div id="main"></div>
    </body>
</html>
CSS的其余部分并不是很重要，但请放心，我已经清除了浮动，等等。布局看起来完全符合我的要求

提供的CSS的目的是使#left and#main处于窗口的最小高度，但如果其中一个变大，页面将随之变大。这是工作的预期

问题是我需要在JavaScript中使用Y滚动位置，但是height:100%和overflow:auto在body上的组合导致body的scrollTop属性始终为0

如果有人有一个JavaScript替代方案或一个小小的CSS更改来解决这个问题，那就太好了。我宁愿避免更大的CSS更改，但它们仍然可能有帮助

谢谢

在Firefox上测试过，这不是问题。我相信这是Chrome的一个错误，我也这么报道。不知道解决方法，怀疑是否存在

编辑：叹气，这似乎也是Safari中的一个问题。

在我看来，您可以通过在元素上使用
100vh
来绕过此错误，您希望始终保持窗口的高度

请参阅修改后的

视口单元没有得到很好的支持，但看起来这将在中起作用。

事实上@scwcompton，您的回答让我找到了正确的解决方法。事实上，webkit浏览器出于某种原因不重新绘制页面

强制重新喷漆为我解决了这个问题。在设置body元素动画之前，我添加了以下代码：

  MLB.BODY = $("#body");
  MLB.BODY.css("display", "none");
  MLB.BODY.height(); // no need to store this anywhere, the reference is enough
  MLB.BODY.css("display", '');


  MLB.BODY.scrollTop(99999);
很抱歉我的解决方案晚了，但我和你一样遇到了一个问题。关键是html标记不喜欢其中的任何溢出规则。只需删除html中的任何溢出并放入body，它就可以使用minheight，不会破坏滚动功能。（仅在铬中测试）。100vh似乎也能正常工作

body, html {
    min-height: 100%;
}
或

您是否尝试过$（window）.scrollTop（）？否-此网站未使用jquery。编辑：我刚刚添加了jquery并对其进行了测试，结果它也返回了0，尽管我被向下滚动了页面。你能发布Javascript并创建一个与相关代码相关的工具吗？或者我们可以在什么地方看到这种行为？我的工具是：只需滚动到底部并单击按钮。它将显示滚动位置为0（这显然是不正确的）。是的，这是一个丑陋的a$$错误。。。还有一个愚蠢的。。。你不使用Opera 12.17吗？这可能是Webkit引擎本身的一个bug。也许Opera 15+会有这个bug。是的，我得出了相同的结论。我向Chromium报告了这个bug，显然自版本30以来已经有了一个修复程序，但是默认情况下没有启用，只能通过chrome://flagsThat 很奇怪。。。要使“简单”的标准页面正常工作，您必须编辑定义吗？好吧，多棒的浏览器啊！。。。 
body, html {
    min-height: 100%;
}

body, html {
    min-height: 100vh;
}