Html 谷歌浏览器垂直滚动条神秘出现和消失？

Google Chrome vertical scroll bars mysteriously appear and disappear?

提问by Soundfx4

The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.

我一直在工作的网站有这个奇怪的，看似不一致的问题，它似乎只发生在谷歌浏览器上。

My main content section will, occasionally, product vertical and horizontal scroll bars.

我的主要内容部分偶尔会产生垂直和水平滚动条。

When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.

当我将页面作为文件打开时，滚动条会在打开页面和刷新页面时间歇性弹出。它们通常不会出现，但每隔几次刷新左右，它们就会弹出。

When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.

当我使用 NGiNX 在本地运行页面时，滚动条会在打开页面时弹出，但在我刷新时消失，并且再多的刷新也不会将它们带回来。如果我在已设置的两个不同测试页面之间来回单击，滚动条会一直存在。只有在点击重新加载时，它们才会消失。

I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.

当我从我的临时免费虚拟主机网站 Zymic 运行它时，我没有看到这个问题。实际上，我什至不会担心它，因为它在直播时没有出现，但是当我注意到从本地运行的 Web 服务器中弹出的问题时，我想我应该调查一下。

I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.

我不知道从哪里开始寻找可能导致问题的原因，但我提供了一个视频，可以清楚地显示问题，以及指向我当前实时站点的链接。根据其他人的报告和我自己的经验，该问题不会从实时站点出现，但它可以访问我当前的所有代码（当前，我正在尝试一些东西）和我很乐意提供任何特别要求的代码。我会尝试立即提供可能导致问题的位，但我不知道：\但是如果我缩小范围，我将包括该位代码以及我发现的内容。

Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0

问题的 58 秒短视频：http: //youtu.be/K7tjGJ8hIV0

Live site (issue should not occur from this link): http://jrltest.zxq.net/

实时站点（此链接不应出现问题）：http: //jrltest.zxq.net/

Thank you all very much!

非常感谢大家！

回答by Joeytje50

This is caused by your overflow:auto;style on your #maincontentdiv. Just change the style to overflow:hidden;to make the scrollbars disappear permanently.

这是由您overflow:auto;在#maincontentdiv上的样式引起的。只需将样式更改overflow:hidden;为使滚动条永久消失即可。

Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.

如果溢出的内容适合容器，则自动溢出将通过对溢出的内容不做任何处理来工作，但如果它溢出一点点，它会插入滚动条以允许用户滚动。在您的情况下，Chrome 可能会识别单个像素的溢出，因此请插入滚动条。这可能与缓存和图像加载有关。我的想法是，如果图像已经在缓存中，Chrome 确切知道它有多大，并且它知道图像适合容器，但是当它尚未缓存时，它会保留一些空间供图像加载，并且由于该空间显然比实际图像稍大，因此它会占用一些额外的空间。

回答by Andris

Check if body value for you is set to overflow:hidden;If it is, than change it ;)

检查您的身体值是否设置为overflow:hidden;如果是，则更改它；）