文档章节

终于学会怎么写后台侧列表(隐藏滚动条)

sizeof
 sizeof
发布于 2016/06/17 03:36
字数 456
阅读 205
收藏 6

终于学会怎么写后台侧列表(隐藏滚动条)

首先一个标准后台程序有三部分组成:

  • 顶部条
  • 左侧列表
  • 右侧正文内容

现在要求如下:

  1. 左侧列表可以滑动,但不可见滚动条
  2. 左侧列表滑动时,顶部条不能动
  3. 右侧内容区高度不够时,左侧依然可以滑动

实现和办法:

  1. 左侧列表和顶部条定位使用position:fixed
  2. 左侧列表要使用bottom:0(left:0),否则不能滑动
  3. 左侧列表使用overflow-x:hidden;overflow-y:scroll;
  4. 左侧列表宽度要和右侧内容的margin-left后对齐,其实就是要用右侧正文内容盖住左侧列表的滚动条而隐藏,而盖住的方式是左侧使用fixed,右侧使用relative
  5. html,body使用height:100%(为满足右侧正文高度)
  6. 右侧正文内容区使用height:100%(来撑起高度)
  7. 右侧正文内容区使用position:relative;(用来覆盖左侧多余的滚动条)
  8. body使用overflow-x:hidden;(非必须)
  9. 右侧内容区一定要给个背景颜色,用来盖住左侧滚动条
  10. 左侧列表使用height:100%

 

简单用代码来写就是:

html,body{

    height:100%;

    overflow-x:hidden;    /*非必须*/

}

.topbar{

    position:fixed;     /*必须*/

}

.sidebar{

    position:fixed;     /*必须*/

    left:0;

    bottom:0;    /*必须*/

    overflow-x:hidden;

    overflow-y:scroll;

    width:270px;    /*要比右侧的margin-left长*/

}

.contents{

    height:100%;

    margin-left:250px;    /*要比左侧的宽度短*/

    position:relative;     /*必须*/

}

 

高亮再演绎一下:

 

html,body{

    height:100%;

    overflow-x:hidden;    /*非必须*/

}

.topbar{

    position:fixed;     /*必须*/

}

.sidebar{

    position:fixed;     /*必须*/

    left:0;

    bottom:0;    /*必须*/

    overflow-x:hidden;

    overflow-y:scroll;

    width:270px;    /*要比右侧的margin-left长*/

}

.contents{

    height:100%;

    margin-left:250px;    /*要比左侧的宽度短*/

    position:relative;     /*必须*/

}

 

© 著作权归作者所有

共有 人打赏支持
sizeof
粉丝 4
博文 18
码字总数 11300
作品 0
海淀
前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方
01/08
0
0
jquery滚动条定位问题

如上的 单题和列表 的切换,实际是一套题,只是点 单题 时只显示一个,其他的隐藏,现在有个问题,比如我在列表模式下滚动到20题,再点 单题 怎么显示20题(每个题的div的类名与题号一样的)...

jquery-php
2016/07/27
85
2
IOS 非常流畅的滑动tableView

为什么要写这篇文章呢?之前写过一篇,因为手机打字不是很方便,还有之前同事用6splus 定下午茶时候,我滑动列表时候竟然误以为是安卓系统的手机。 tableview 流畅度可以用fps来测试,到60帧...

人魔七七
2016/03/13
0
0
关于overflow元素,hidden属性“隐藏失效”问题的探究

1.overflow元素属性的简单介绍。 正如w3c介绍的那样……overflow总共有五个属性。 overflow:visible;默认值,如果内容超出,则会呈现在盒子之外。 overflow:scroll;超出的内容会以滚动条的形...

wx5acc491a99d46
04/24
0
0
Windows下简单的emacs配置

刚开始学习这个编辑器,在网上翻了一些东西,都不太懂得,主要是那些都是给高手用的配置,我这个菜鸟当然不懂得。搜索了一下,得到一个简单的配置,以后慢慢学习就完善起来。 首先设置环境变...

ryany
2010/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
35分钟前
1
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
40分钟前
24
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
42分钟前
1
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
55分钟前
401
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部