AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css实现两列布局区块独立，独立滚屏

2023-06-29 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css实现两列布局区块独立，独立滚屏

写法一


使用 overflow: scroll;  属性溢出隐藏，展示滚动条，可直接复制，代码如下：

结构：

1. <!-- 容器 -->
2. <div class="container">
3. 
4. <!-- 左 -->
5. <div class="box_left">
6. <div class="box_inner_left">
7.                 测试数据1测试数据1测试数据1测试数据1
8.                 测试数据1测试数据1测试数据1测试数据1
9.                 测试数据1测试数据1测试数据1测试数据1
10.                 测试数据1测试数据1测试数据1测试数据1
11.                 测试数据1测试数据1测试数据1测试数据1
12.                 测试数据1测试数据1测试数据1测试数据1
13.                 测试数据1测试数据1测试数据1测试数据1
14.                 测试数据1测试数据1测试数据1测试数据1
15.                 测试数据1测试数据1
16. </div>
17. </div>
18. 
19. 
20. 
21. <!-- 右 -->
22. <div class="box_right">
23. <div class="box_inner_right">
24.                 测试数据2测试数据2测试数据2测试数据2
25.                 测试数据2测试数据2测试数据2测试数据2
26.                 测试数据2测试数据2测试数据2测试数据2
27.                 测试数据2测试数据2测试数据2测试数据2
28.                 测试数据2测试数据2测试数据2测试数据2
29.                 测试数据2测试数据2测试数据2测试数据2
30.                 测试数据2测试数据2测试数据2测试数据2
31.                 测试数据2测试数据2测试数据2测试数据2
32.                 测试数据2测试数据2测试数据2测试数据2
33.                 测试数据2测试数据2测试数据2测试数据2
34.                 测试数据2测试数据2测试数据2测试数据2
35.                 测试数据2测试数据2测试数据2测试数据2
36.                 测试数据2测试数据2测试数据2测试数据2
37.                 测试数据2测试数据2测试数据2测试数据2
38.                 测试数据2测试数据2测试数据2测试数据2
39.                 测试数据2测试数据2测试数据2测试数据2
40.                 测试数据2测试数据2测试数据2测试数据2
41.                 测试数据2测试数据2测试数据2测试数据2
42.                 测试数据2测试数据2测试数据2测试数据2
43.                 测试数据2测试数据2测试数据2测试数据2
44. </div>
45. </div>
46. 
47. 
48. </div>

样式：

1.       *{
2. margin: 0;
3. padding: 0;
4.         }
5. /* 容器 */
6. .container{
7. width: 300px;
8. height: 400px;
9. border: 1px solid red;
10. padding: 0px 10px;
11. display: flex;
12. justify-content: space-between;
13.         }
14. 
15. 
16. /* 左边区块容器 */
17. .box_left{
18. width: 100px;
19. height: 400px;
20. background-color: #ccc;
21. overflow: scroll;  /*溢出隐藏，展示滚动条*/
22.         }
23. .box_left::-webkit-scrollbar { display: none; }  /* 隐藏滚动条 */
24. /* 左边区块内容 */
25. .box_inner_left{
26. width: 100px;
27. height: 800px;
28. border: 1px solid blue;
29.         }
30. 
31. 
32. /* 右边区块容器 */
33. .box_right{
34. width: 160px;
35. height: 400px;
36. background-color: beige; 
37. overflow: scroll; /*溢出隐藏，展示滚动条*/
38. overflow-x: hidden;   /*隐藏x轴滚动条*/
39.         } 
40. /* 右边区块内容 */
41. .box_inner_right{
42. width: 100%;
43. height: 1000px;
44.         }
45.

此处主要用到  overflow: scroll; 将超出盒子部分的内容隐藏，并以滚动条的形式展现。

设置滚动条的样式

1. /* 设置右边模块的滚动条样式，左边写法的一样，此处未写 */
2.    /*滚动条样式 宽高*/
3.    .box_left::-webkit-scrollbar{
4.        width:5px;
5.        height:5px;
6.    }
7.    /* 滚动条轨道的样式 */
8.    .box_left::-webkit-scrollbar-track{
9.        background: rgba(95, 188, 255, 0.1);
10.         border-radius:2px;
11.     }
12.     /* 滚动条颜色 */
13.     .box_left::-webkit-scrollbar-thumb{
14.         background: red;
15.         border-radius:10px;
16.     }
17.     /* 移入效果 */
18.     .box_left::-webkit-scrollbar-thumb:hover{
19.         background: #333;
20.     }

滚动条样式主要涉及到如下CSS属性:


::-webkit-scrollbar{display:none}  /*隐藏滚动条*/

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条

overflow: scroll; 总是显示滚动条

overflow-x: hidden; 禁止横向的滚动条

overflow-y: scroll; 总是显示纵向滚动条

width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

height: 120px; 设置区域的高度[像素/百分比等等]

写法二



主要使用到了vh单位

css中的vh是一种视窗单位，也是相对单位。相对于视窗的高度。视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的

代码如下：（分为html部分和css部分）

可直接复制


html部分

<!-- 分类 -->

       <div class="center">

           <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 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>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>  

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

           </div>

       </div>

Css部分

.center{

   width: 365px;

   border: 1px solid red;

   display: flex;

   justify-content: space-between;

  }

   .left{

       width: 110px;

       height: 100vh;

       background-color: red;

       overflow: auto;

   }

   .right{

       width: 250px;

       height: 100vh;

       background-color: gold;

       overflow: auto;

   }

也可以使用css的溢出滚动功能，当盒子内的元素溢出是 overflow:scroll,即可实现超两遍独立滚动的效果。左右两个盒子都设置overflow：scroll即可左右独立滚动。

文章标签：
前端开发
关键词：
CSS布局
DCodes
目录
相关文章
hnrk7epeorhrk
|
2月前
|
Web App开发 前端开发 JavaScript
技术心得记录：瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
技术心得记录：瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
hnrk7epeorhrk
26 0
李木子2024
|
15天前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器：vw/vh、rem、%与px大PK，掌握它们，让你的网页设计秒变高大上，面试难题迎刃而解！
【8月更文挑战第4天】在Web开发中，合理选择CSS单位对响应式布局至关重要。本文探索viewport单位（vw/vh）、rem、百分比（%）及像素（px）的基础知识与应用场景。通过代码示例，展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后，模拟面试题，介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
李木子2024
46 8
米诺斯
|
2月前
|
前端开发
CSS中的display属性：布局控制的关键
CSS中的display属性：布局控制的关键
米诺斯
135 42
白如意i
|
5天前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
15 0
刘志辉~
|
8天前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
刘志辉~
17 0
刘志辉~
|
8天前
|
编解码 前端开发 容器
CSS弹性布局：打造响应式与灵活的网页设计
CSS弹性布局：打造响应式与灵活的网页设计
刘志辉~
19 0
1941623231718325
|
1月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
35 2
朝阳39
|
1月前
|
前端开发
css 十字分割线（含四等分布局）
css 十字分割线（含四等分布局）
朝阳39
28 2
朝阳39
|
1月前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
朝阳39
25 0
CSS 【实战】 “四合院”布局
朝阳39
|
1月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
朝阳39
30 1

热门文章

最新文章

  • 1
    web前端css定位position和起浮float
  • 2
    把CSS预编译器改成SASS
  • 3
    前端学习笔记（7）css选择器（一）
  • 4
    动态背景的CSS3登录表单
  • 5
    css优先级计算规则
  • 6
    CSS 有关Position = absolute (绝对定位 是相对于谁而言)
  • 7
    css选择器的优先级
  • 8
    关于css,js放置位置的问题
  • 9
    meego中css主题文件的使用方法
  • 10
    css3 多行文本 溢出 省略号
  • 1
    【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
    70
  • 2
    【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
    59
  • 3
    【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
    59
  • 4
    【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
    57
  • 5
    【专栏：HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
    288
  • 6
    【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
    398
  • 7
    【专栏：HTML与CSS实战项目篇】制作一个响应式图片画廊
    71
  • 8
    【专栏：HTML 与 CSS 实战项目篇】构建一个企业级网站：HTML 与 CSS 实战
    179
  • 9
    【专栏：HTML与CSS移动端开发篇】移动端网页性能优化策略
    65
  • 10
    【专栏：HTML与CSS移动端开发篇】移动端触摸事件与手势识别
    138

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    通义千问API入门教程