如何实现移动端页面时滑动一端另一端不动

最新推荐文章于 2024-03-20 12:10:13 发布

抱抱小辫儿

最新推荐文章于 2024-03-20 12:10:13 发布

阅读量700

点赞数

分类专栏： html css 文章标签：滚轴

本文链接：https://blog.csdn.net/qq_44936905/article/details/99054654

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

在移动端的一些电商页面中往往有这种分类的样式
例如在左右有两个列表那么如何实现这种滑动一侧另一侧不动呢
首先我们给这两个列表的父元素使用固定定位然后分别给这两个列表添加滚轴
这是我在最近练习写小米lite这个小程序的时候得出的结论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    body{
        width: 100%;
        height: 100%;
        padding: 0 5vw;
    }
    /* 最外侧 */
    .wrapper{
        width: 90vw;
        height: 100vh;
        /* 弹性布局 */
        display: flex;
        /* 固定定位 */
        position: fixed;
        padding: 5vw;
        border: 1px solid red;
 }
 .wrapper li{
     padding: 2vh 2vw;
 }
 /* 左侧列表 */
    .left{
        width: 50vw;
        height: 100%;
        border-right: 1px solid sandybrown;
        /* 添加滚轴 */
        overflow: scroll;
    }
    /* 右侧列表 */
    .right{
        width: 50vw;
        height: 100%;
        overflow: scroll;
    }
    </style>
</head>
<body>
   <div class="wrapper">
      <div class="left">
          <ul>
              <li>列表1</li>
              <li>列表2</li>
              <li>列表3</li>
              <li>列表4</li>
              <li>列表5</li>
              <li>列表6</li>
              <li>列表7</li>
              <li>列表8</li>
              <li>列表9</li>
              <li>列表10</li>
              <li>列表11</li>
              <li>列表12</li>
              <li>列表13</li>
              <li>列表14</li>
              <li>列表15</li>
              <li>列表16</li>
              <li>列表17</li>
              <li>列表18</li>
              <li>列表19</li>
              <li>列表20</li>
          </ul>
      </div>
      <div class="right">
          <ul>
              <li>列表01</li>
              <li>列表02</li>
              <li>列表03</li>
              <li>列表04</li>
              <li>列表05</li>
              <li>列表06</li>
              <li>列表07</li>
              <li>列表08</li>
              <li>列表09</li>
              <li>列表10</li>
              <li>列表11</li>
              <li>列表12</li>
              <li>列表13</li>
              <li>列表14</li>
              <li>列表15</li>
              <li>列表16</li>
              <li>列表17</li>
              <li>列表18</li>
              <li>列表19</li>
              <li>列表20</li>
              <li>列表21</li>
              <li>列表22</li>
              <li>列表23</li>
              <li>列表24</li>
              <li>列表25</li>
              <li>列表26</li>
              <li>列表27</li>
              <li>列表28</li>
              <li>列表29</li>
              <li>列表30</li>
          </ul>
      </div>
   </div>
</body>
</html>

如果有不足的还请指出继续改进