我的 html 页面没有在浏览器中滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20038673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My html page is not scrolling in browsers
提问by Pol
The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.
我网站上的页面没有滚动。如果内容多于屏幕可以容纳的内容，您实际上无法看到它，因为滚动不起作用。我不是 CSS 大师，我不知道问题实际上出在 CSS 还是 HTML 上。
I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.
我花了一些时间试图理解这个问题，但我不是 CSS 大师，所以我希望有人能帮助我。该页面正在使用推特引导程序和自定义主题（我没有写）。当我不包含主题 CSS 文件时，滚动工作正常。
Part of my theme CSS file:
我的主题 CSS 文件的一部分：
body {
color: #000;
font-family: 'Play', sans-serif;
font-size: 16px;
line-height: 25px;
background: #e0dbcd url('../images/bg.jpg');
letter-spacing:0.2px;
overflow: hidden;
}
回答by Nabbit
remove overflow: hidden;from bodyin the bootstrap-theme.css file.
overflow: hidden;从bodybootstrap-theme.css 文件中删除。
回答by JohnVanDijk
For someone who was in my scenario, this could be happening because of height: 100%for html, body in angular-material.css. Remove it and you're good to go.
对于在我的场景中的人来说，这可能是因为height: 100%html, body 在 angular-material.css 中。删除它，你就可以开始了。
回答by nclaudiuf
I agree will all above said, something to add I recently discovered in my code is the following CSS added.
我同意上面所说的所有内容，我最近在我的代码中发现要添加的内容是添加了以下 CSS。
* {
-moz-transition: .5s ease-in-out;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.
这也会干扰 HTML 和正文滚动。因此，我建议在您希望具有效果的特定组件中添加此过渡效果，而不是在 HTML 和正文中。
回答by Alex139602
This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a
这可能与任何人无关，但无论如何我都会在这里发表评论 - 我正在使用
pseudo :after
pseudo :after
element on the body, and had applied
身体上的元素，并已应用
position: fixed
position: fixed
below a certain viewpoint to the css, however I had put
低于对 css 的某个观点，但是我已经把
.classname
.classname
and not
并不是
.classname:after
.classname:after
on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.
在元素上。我将在下面发布 CSS。这样做是固定页面的位置，使其无法滚动。
full CSS that's relevant:
相关的完整 CSS：
body {
background-color: #5c2028;
color: #ffffff;
min-width: 100%;
min-height: 100%;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
overflow-x: hidden;
}
body.bg{
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
body.bg:after{
content : "";
background-image: url('../img/hildasball_7_d_s_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-clip: none;
display: block;
position: fixed;
top: 0;
left: 0;
opacity : 1.0;
z-index: -2;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
/*width: auto;
height: auto;*/
}
@media (max-width: 767px) {
body{
min-height: 800px;
}
/* Initially, i put body.bg not body.bg:after, which made things not scroll and i ended up getting confused as hell */
/* 最初，我把 body.bg 放在了 body.bg:after 上，这使得东西不能滚动，最后我变得很困惑 */
body.bg:after{
position: fixed;
}
.floatContact {
float: none;
}
}
回答by Bloggrammer
Remove overflow: hidden;from bodyas @Nabbit suggested or set overflow: scroll;
overflow: hidden;从body@Nabbit 建议或设置中删除overflow: scroll;
Edited:
编辑：
The overflowproperty controls what happens to content that breaks outside of its bounds. By default, the property is visiblei.e. content is not clipped when it proceeds outside its box.
该overflow属性控制超出其边界的内容会发生什么。默认情况下，属性是visible即内容在其框外进行时不会被剪裁。
overflow: hidden;means overflowing content will be hidden.
overflow: hidden;意味着溢出的内容将被隐藏。
overflow: scroll;this is similar to hidden except users will be able to scroll through the hidden content.
overflow: scroll;这类似于隐藏，但用户将能够滚动浏览隐藏的内容。
