前端如何实现局部滚动效果?

news2025/7/18 18:08:01

一、基础版局部滚动

重点在于给需要滚动的区域加上 overflow: auto; 属性

 废话不多说，先上基础版的局部滚动代码：

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 清除浏览器默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  /* 父盒子的宽高要基础页面的宽高，所以 body、html要给宽高 */
  main {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: plum;
  }

  /* ul里面的内容要超出main的高度，才会有滚动效果 */
  ul {
    flex: 1;
    overflow: auto;
  }

  /* 底部盒子固定，中间盒子自适应 */
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: yellowgreen;
  }
</style>

<body>

  <main>
    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
      <li>这是第10个li</li>
      <li>这是第11个li</li>
      <li>这是第12个li</li>
      <li>这是第13个li</li>
      <li>这是第14个li</li>
      <li>这是第15个li</li>
      <li>这是第16个li</li>
      <li>这是第17个li</li>
      <li>这是第18个li</li>
      <li>这是第19个li</li>
      <li>这是第20个li</li>
      <li>这是第21个li</li>
      <li>这是第22个li</li>
      <li>这是第23个li</li>
      <li>这是第24个li</li>
      <li>这是第25个li</li>
      <li>这是第26个li</li>
      <li>这是第27个li</li>
      <li>这是第28个li</li>
      <li>这是第29个li</li>
      <li>这是第30个li</li>
      <li>这是第31个li</li>
      <li>这是第32个li</li>
      <li>这是第33个li</li>
      <li>这是第34个li</li>
      <li>这是第35个li</li>
      <li>这是第36个li</li>
      <li>这是第37个li</li>
      <li>这是第38个li</li>
      <li>这是第39个li</li>
      <li>这是第40个li</li>
      <li>这是第41个li</li>
      <li>这是第42个li</li>
      <li>这是第43个li</li>
      <li>这是第44个li</li>
      <li>这是第45个li</li>
      <li>这是第46个li</li>
      <li>这是第47个li</li>
      <li>这是第48个li</li>
      <li>这是第49个li</li>
      <li>这是第50个li</li>
      <li>这是第51个li</li>
      <li>这是第52个li</li>
      <li>这是第53个li</li>
      <li>这是第54个li</li>
      <li>这是第55个li</li>
      <li>这是第56个li</li>
      <li>这是第57个li</li>
      <li>这是第58个li</li>
      <li>这是第59个li</li>
      <li>这是第60个li</li>
    </ul>
  </main>
  <footer></footer>

</body>

</html>

 二、进阶版局部滚动-->盒子左右两边都有滚动效果(仿京东商品分类布局)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 清除浏览器默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 祛除小圆点 */
    list-style: none;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .big {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: plum;
    overflow: hidden;
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: pink;
  }

  /* 父盒子的宽高要基础页面的宽高，所以 body、html要给宽高 */
  main {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  /* ul里面的内容要超出main的高度，才会有滚动效果 */
  ul {
    overflow: auto;
  }

  .one {
    background-color: yellow;
    width: 100px;
  }

  .two {
    flex: 1;
  }


  /* 底部盒子固定，中间盒子自适应 */
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: yellowgreen;
  }
</style>

<body>
  <div class="big">
    <div class="top">顶部</div>
    <main>
      <ul class="one">
        <!-- ul>li*100{第$个li} -->
      </ul>
      <ul class="two">
        <!-- ul>li*100{第$个li元素} -->
      </ul>
    </main>
    <footer>底部</footer>
  </div>

</body>

</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/368972.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智能优化算法——遗传算法（GA）（纯理论，不包含代码）

智能优化算法——遗传算法（GA）（纯理论，不包含代码）

今天接着PSO&#xff0c;记录一下遗传算法的实现原理。&#xff08;若有错误&#xff0c;请大佬帮忙指正&#xff01;&#xff09;&#xff08;同样&#xff0c;主要参考b站视频学习加入自己的一些理解&#xff0c;如果想要看视频学习&#xff0c;可以直接移步最后参考链接&…
阅读更多...
深度学习引言

深度学习引言

动手学深度学习pytorch版-笔记原文链接日常生活中的机器学习机器学习中的关键组件数据模型目标函数优化算法各种机器学习问题监督学习回归分类标记问题搜索推荐系统序列学习无监督学习与环境互动强化学习特点小结原文链接 动手学深度学习pytorch中文版 日常生活中的机器学习 …
阅读更多...
可怕，chatGPT用3小时教会我数据分析

可怕，chatGPT用3小时教会我数据分析

chatGPT这玩意真的是我的救星，用它作为我的Python教练，我用三个小时学会了数据处理（Pandas）和绘图（matplotlib)。 这两个库的学习，在之前已经困扰了我7个月。之前卡壳的原因，是我一直没有耐心从零开始，按照教材设置的教程去学习Python——我擅长在项目中学习，一点一点…
阅读更多...
Android实现炫酷跳动的闪屏LOGO

Android实现炫酷跳动的闪屏LOGO

前言&#xff1a;在日常开发中&#xff0c;经常会遇到各种视觉效果&#xff0c;有的效果可能一眼看去会让人觉得很复杂&#xff0c;但是我们必须明确一点&#xff1a;所有复杂动效都是可以分解成单一的基础动作&#xff0c;比如缩放&#xff0c;平移&#xff0c;旋转这些基础单…
阅读更多...
最新BlackArch发布，提供1400款渗透测试工具

最新BlackArch发布，提供1400款渗透测试工具

近日&#xff0c;BlackArch Linux新版本发布&#xff0c;此版本为白帽子和安全研究人员提供了大约1400款渗透测试工具&#xff0c;如果你是一位白帽子或者安全研究人员&#xff0c;这个消息无疑会让你很感兴趣。BlackArch Linux是一款基于Arch Linux的发行版&#xff0c;主要面…
阅读更多...
luckysheet的使用——07.二次开发自动插入批注功能

luckysheet的使用——07.二次开发自动插入批注功能

在单元格编辑完成后&#xff0c;需要自动在这个单元格上新增批注&#xff0c;此时需要改造旧代码&#xff0c;首先找到路径为 src/controllers/postil.js的文件&#xff0c;找到新增批注时触发的方法&#xff0c;如下&#xff1a; 2.对方法进行改造&#xff0c;新增传入变量co…
阅读更多...
深入探讨下，IPC产品与智能家居融合的无限开创性

深入探讨下，IPC产品与智能家居融合的无限开创性

IPC还有哪些新玩法&#xff1f;随着摄像头的应用场景增加&#xff0c;IPC作为一种能力&#xff0c;正在融入到越来越多的智能设备中&#xff0c;形成了一批富有创意的智能 IPC 融合类产品。 比如&#xff0c;扫地机结合智能 IPC 后&#xff0c;能实现可视化精准识别障碍物&…
阅读更多...
C++实现日期类

C++实现日期类

文章目录前言1.日期类的功能分析1.大致分析2.接口设计2.具体实现1.日期类的成员函数和成员变量2.初始化(构造函数&#xff09;3.对日期进行天数推算4.比较相关的运算符重载5.前置后置自增或自减6.日期相减与流插入流提取1.日期相减2.重载流插入和流提取3.总结前言 之前介绍了C…
阅读更多...
数据结构与算法—链表list

数据结构与算法—链表list

目录 链表 链表类型 链表插入 链表删除 写程序注意点 与数组区别 链表应用 LRU 实现思想 链表 链表&#xff0c;一种提高数据读取性能的技术&#xff0c;在硬件设计、软件开发中有广泛应用。常见CPU缓存&#xff0c;数据库缓存&#xff0c;浏览器缓存等。缓存满时&#…
阅读更多...
mongoDB5以上实现单机事务

mongoDB5以上实现单机事务

原理就是因为目前mongodb只有副本&#xff0c;分片支持事务。我们就让单机变成单节点副本&#xff0c;同时又是主节点&#xff0c;可以读写一、修改bin目录下的mongod.cfg新增配置replication:replSetName: rs0二、重启mongodb服务、初始化&#xff08;这是windows下的启动命令…
阅读更多...
2月24日作业

2月24日作业

题目&#xff1a;通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作--->上传CSDN 1.例如在串口输入led1on,开饭led1灯点亮 2.例如在串口输入led1off,开饭led1灯熄灭 3.例如在串口输入led2on,开饭led2灯点亮 4.例如在串口输入led2off,开饭led…
阅读更多...
day20_Map

day20_Map

今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、比较器排序 三、Collections 四、Map 五、HashMap 六、TreeMap 零、 复习昨日 HashSet 不允许重复元素,无序 HashSet去重原理: 先比较hashco…
阅读更多...
Java知识复习（二）Java集合

Java知识复习（二）Java集合

1、List、Set和Map的区别 List&#xff1a;存储的顺序是有序的、可重复的Set&#xff1a;存储的顺序是无序的、不可重复的Map&#xff1a;使用键值对存储&#xff0c;Key和Value都是无序的&#xff0c;其中Key不可重复&#xff0c;而Value可重复 2、ArrayList和LinkedList的区…
阅读更多...
node报错

node报错

记录bug:运行 npx -p storybook/cli sb init 时报错gyp info spawn C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\MSBuild.exegyp info spawn args [gyp info spawn args build/binding.sln,gyp info spawn args /nologo,gyp info spawn args…
阅读更多...
OpenCV只含基本图像模块编译

OpenCV只含基本图像模块编译

编译OpenCV4.5.5只含基本图像模块&#xff0c;环境为Windows10 x64CMake3.23.3VS2019。默认编译选项编译得到的OpenCV库往往大几百MB甚至上GB&#xff0c;本文配置下编译得到的库压缩后得到的zip包大小仅6.25MB&#xff0c;适合使用OpenCV基本图像功能模块的项目移植而不牵涉其…
阅读更多...
电子技术——伯德图与反馈

电子技术——伯德图与反馈

电子技术——伯德图与反馈 增益和相位边距 从上两节我们知道环路增益 AβA\betaAβ 可以决定一个系统的稳定性&#xff0c;一个更加简单和有效的方法是我们可以绘制 AβA\betaAβ 的伯德图&#xff08;因为相位可以达到360度&#xff0c;因此这是一个四阶响应系统&#xff09;…
阅读更多...
行锁、表锁、主键外键、表之间的关联关系

行锁、表锁、主键外键、表之间的关联关系

Java知识点总结&#xff1a;想看的可以从这里进入 目录2.4、行锁、表锁2.5、主键、外键2.5.1、主键2.5.2、外键2.6、表的关联关系2.4、行锁、表锁 MyISAM默认采用表级锁&#xff0c;InnoDB默认采用行级锁。 表锁&#xff1a;开销小&#xff0c;加锁快&#xff0c;不会出现死锁…
阅读更多...
KTV「消亡史」：辉煌、挫折与新生

KTV「消亡史」：辉煌、挫折与新生

【潮汐商业评论/原创】这是Ina工作的第五年&#xff0c;疫情之后&#xff0c;第一场大学同学聚会就定在了周末。同学群里大家热烈地讨论着聚会的地点&#xff0c;“要不咱们去KTV吧&#xff0c;哈哈哈哈哈哈”&#xff0c;突然有人提议到。“谁还去KTV啊”“多没意思啊”……随…
阅读更多...
按字典序排列的最小的等价字符串[拆解并查集]

按字典序排列的最小的等价字符串[拆解并查集]

并查集前言一、按字典序排列的最小的等价字符串二、并查集总结参考文献前言 并查集有什么用&#xff1f;并查集是什么&#xff1f;搞懂这两个问题&#xff0c;相关的并查集问题就变得非常easy&#xff01; 一、按字典序排列的最小的等价字符串 二、并查集 有一种方法&#x…
阅读更多...
工单模型的理解与应用

工单模型的理解与应用

工单&#xff08;任务单&#xff09;模型的定义 工单模型是一种分派任务的方法&#xff0c;可以用来跟踪、评估和报告任务的完成情况。它通常用于针对特定目标的重复性任务或项目&#xff0c;以确保任务能够按时完成并符合期望的标准。   工单模型的基本流程为&#xff1a;提…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023