Question

我网站上的页面没有滚动。如果有比屏幕更多的内容，你实际上看不到它，因为滚动不起作用。我不是和CSS大师，我不知道问题是否实际上是CSS或HTML。

我花了一些时间试图理解这个问题，但我不是CSS大师，所以我希望有人可以帮助我。该页面使用了tweeter-bootstrap和自定义主题（我没有写）。当我不包括主题CSS文件滚动工作正常。

我的主题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;
}

Answer 1

从bootstrap-theme.css文件中的overflow: hidden;中删除body。

Answer 2

对于在我的场景中的某个人，可能会发生这种情况，因为html为height: 100%，angular-material.css为body。删除它，你很高兴。

Answer 3

按照@Nabbit的建议从overflow: hidden;中删除body或设置overflow: scroll;

已编辑：

overflow属性控制超出其范围的内容所发生的变化。默认情况下，该属性为visible，即当内容超出其框的范围时，内容不会被裁剪。

overflow: hidden;意味着溢出的内容将被隐藏。

overflow: scroll;类似于隐藏的内容，不同之处在于用户可以滚动浏览隐藏的内容。

Answer 4

这可能与任何人无关，但无论如何我都会在这里发表评论 - 我正在使用

pseudo :after

身体上的

元素，并已应用

position: fixed

低于css的某个观点，但是我已经放了

.classname

而不是

.classname:after

元素上的

。我将在下面发布CSS。这样做是为了修复页面的位置，使其无法滚动。

相关的完整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;
  }

/ *最初，我把body.bg放入body.bg：after，这使得事情不滚动，我最终感到困惑，因为地狱* /

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}

Answer 5

我同意以上所有内容，我最近在代码中发现的要添加的内容是添加了以下CSS。

* {
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

这也可能会干扰HTML和正文滚动。因此，我建议将此过渡效果添加到您希望具有效果的特定组件中，而不要添加到HTML和正文中。

我的html页面没有在浏览器中滚动

5 个答案: