html+css 做个弹出层,主页内容不随层里内容一起上下滚动

clipboard.png

clipboard.png

我想要弹出层的内容(22qq)上下滚动,主页内容(11111111)不动,但现在是两个页面一起动的,这要怎么解决??

<!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>弹出层</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .header{
        width: 100%;
        height: 100px;
        background: deepskyblue;
        position: fixed;
        top:0;
        z-index: 12;
    }
    .header p{
        font-size: 70px;
        text-align: center;
    }
    ul{
        margin-top: 100px;
        z-index: -1;
    }
    li{
        height: 150px;
    }
    .ceng{
        width: 100%;
        position: absolute;
        top: 100px;
        display: table;
        z-index: 10;
    }
    .ceng p{
        height: 100px;
        font-size: 70px;
        text-align: right;
    }
    .ceng .left{
        display: table-cell;
        background: black;
        opacity: 0.4;
        width: 20%;
    }
    .ceng .right{
        display: table-cell;
        width: 80%;
        background: white;
    }
</style>
</head>
<body>
<div class="main">
<div class="header">
    <p>我的世界!</p>
</div>
<ul>
    <li>11111111111aa</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
</ul>
<div class="ceng">
    <div class="left"></div>
    <div class="right">
        <p>22222qq</p>
        <p>222222qq</p>
        <p>22222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
        <p>22222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
        <p>22222qq</p>
        <p>22222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
        <p>2222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
        <p>2222qq</p>
        <p>22222qq</p>
        <p>2222qq</p>
    </div>
</div>
</div>
</body>
 </html>
阅读 1.6k
评论
    3 个回答
    • 114

    给需要滚动的地方加个父元素,设置父元素的属性over-flow-y:scroll

      可以用iframe,给你写个简单的例子代码:

      两个HTML文件:index.html和index2.html

      index.html:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .cnt{
                  width: 300px;
                  height: 800px;
                  background-color: orange;
                  float: left;
              }
          </style>
      </head>
      <body>
          <div class="cnt"></div>
          <iframe src="index2.html" width="400" height="800"></iframe>
      </body>
      </html>

      index2.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .cnt{
                  width: 300px;
                  height: 1200px;
                  background-color: red;
                  float: left;
              }
          </style>
      </head>
      <body>
          <div class="cnt"></div>
      </body>
      </html>

      注意要把两个文件放在同一个目录下,或者修改index.html里面的src路径也行。


      参考了楼上的overflow-y的方式:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .cnt{
                  width: 300px;
                  height: 800px;
                  background-color: red;
                  float: left;
              }
              .scroll{
                  width: 300px;
                  height: 800px;
                  float: left;
                  overflow-y: scroll;
              }
              .cnt2{
                  width: 300px;
                  height: 1200px;
                  background-color: orange;
              }
          </style>
      </head>
      <body>
          <div class="cnt"></div>
          <div class="scroll">
              <div class="cnt2"></div>
          </div>
      </body>
      </html>

        lz说的问题是滚动穿透吧,就是滚动弹框时,body内容也会滚动。解决方法可以在弹框出现是设置body为fixed定位。不过这样还有个问题就是body设置fixed后会回到顶部,可以在设置fixed前先记住当前位置,在设置fixed后设置之。

        scrollTop = document.scrollingElement.scrollTop;
        document.body.style.top = -scrollTop + 'px';

        弹框消失时去掉body的fixed,同样,body会跳到顶部。这是再设置document.scrollingElement.scrollTop = scrollTop;
        亲测有用,我的一个上线的页面就是这样做的。

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章