zoukankan      html  css  js  c++  java
  • 两列布局实现各自独立滚屏,类似与 scrollNav 的功能。

    现在移动端 web 开发越来越靠近 app 的功能。所以两列布局各自都能实现独立滚动也常见。基于固定侧边栏导航,另一侧实现内容展示。

    这个功能的核心在于使用 vh 单位。

    如图所示

    其中 CSS 的代码是核心点,代码如下:

    <!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 media="screen">
        .wrapper {
          display: flex;
           100%;
        }
    
        .left, .right {
           50%;
          height: 100vh;
          overflow: auto;
        }
      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="left">
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
          <div>第一列</div>
        </div>
        <div class="right">
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
          <div>第二列</div>
        </div>
      <div>
    </body>
    </html>
    
    
  • 相关阅读:
    Python下划线简介
    OneHot编码
    搜狗新闻原始数据处理
    2. mirth connect探索------------ cs模式客户端登录
    System.Net.WebException: 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系。 ---> System.Security.Authentication.AuthenticationException: 根据验证过程,远程证书无效。
    python学习历程-安装篇(一)
    Python学习笔记(一)
    使用dva 搭建ant design mobile项目
    [error] OpenEvent("Global gx_stop_25184") failed (2: The system cannot find the file specified)
    nginx 上部署 react 项目
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/11141124.html
Copyright © 2011-2022 走看看