可拉伸侧边栏
· 阅读需 3 分钟
核心原理
- 整体布局相对侧边栏绝对定位，侧边栏的宽度与内容区域的paddingLeft使用同一变量控制、
- 侧边栏右侧添加一个透明的竖条，用于控制用户拖拽（捕获鼠标按下去的动作）
- 用户按下去以后记录距离屏幕左侧的位置，和启动拖拽状态(显示全屏的遮罩监听鼠标移动)
- 鼠标在遮罩上移动->计算并设置当前的宽度，同时更新开始位置
- 当鼠标抬起时，关闭拖拽状态，并且将值记录到localStorage
补充：容易联想到可以有一个图标点击之后直接设置宽度为预设的两种状态
1 篇博文 含有标签「可拉伸侧边栏」
查看所有标签