Task 2: sidebar滚动和container区域滚动分离

功能:

  • sidebar和container为左右两部分区域, 分开滚动,互不影响;
  • sidebar区域滚动不显示滚动条;
  • 固定sidebar和container上方导航栏;

实现思路:

页面结构为: sidebar 采用了position: fixed; container是float: left

  • 隐藏滚动条
.sidebar {
    float: left;
    width: 222px;
    position: fixed;
    height: calc(~"100% - 82px");
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;

    &::-webkit-scrollbar {
        width: 0;
    }
}
  • 固定导航栏: position: fixed;
.breadcrumb {
        position: fixed;
        top: 48px;
        z-index: 10;
        width: 100%;
        background-color: #f4f4f4;
    }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,706评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,776评论 32 459
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,065评论 3 119
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,382评论 0 5
  • 我觉得书本所具备的意义在于它所承载的文字为我们提供了发现这个世界的放大镜,所以我们在书本里看到的大多都是被夸大...
    轻喃耳语阅读 3,199评论 0 0

友情链接更多精彩内容