使用纯CSS 实现侧边栏拖拽效果

embedded/2025/3/13 14:06:32/

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、效果实现原理
二、代码演示
三.简单解释下样式
四完整的DEMO
总结

前言

有不少需求是要拖动改变侧边栏宽高的，以下就是在不适用js ,只使用css 的情况下实现这个效果

一、效果实现原理

使用 textarea 标签的多行文本输入的时候，相信大家看到右下角有块儿区域可以拖动改变输入框的大小，本次的效果就是使用了这个特性。

二、代码演示

HTML 结构

<div class="columns-box"><div class="column-left"><!-- 拖拽拖拽触发DOM --><div class="column-resize-bar"></div><!-- 拖拽高亮线条展示 --><div class="resize-line"></div><!-- 左侧内容 展示区域 --><div class="column-left-inner"></div></div><!-- 右侧区域内容 --><div class="column-right"></div>
</div>

CSS 样式使用 SASS 语法

css">.columns-box {border: 1px solid #666666;box-sizing: border-box;height: 100%;display: flex;align-items: stretch;> .column-left {height: 100%;border-right: 1px solid #ff0000;min-width: 20px;position: relative;z-index: 1;> .column-resize-bar {width: 140px;height: 100%;min-width: 20px;padding-right: 4px;box-sizing: content-box;max-width: 500px;margin-right: -4px;resize: horizontal;overflow: scroll;opacity: 0;cursor: e-resize;cursor: col-resize;&::-webkit-scrollbar {width: 20px;height: 100vh;}&:hover {+ .resize-line {opacity: 1;}}}> .resize-line {opacity: 0;position: absolute;top: 0;right: -4px;bottom: 0;width: 4px;background-color: #A5B1FF;pointer-events: none;}> .column-left-inner {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}}> .column-right {flex: 1;height: 100%;width: 0;/* min-width: 0; */}
}

三.简单解释下样式

HTML 结构比较简单，就不过多解释，CSS 还是有几行的，稍微解释下

.columns-box 整个可拖拽结构的容器，设置了 flex 属性，里面两个dom，一个.column-left，一个.column-right，.column-left 这个dom主要控制左侧宽度，右侧的默认填充满剩余空间，实现原理就是 flex-grow 的效果，可以看这篇文章，相对于文章里的介绍只是改变了排列方向，flex-direction: row; 默认值。

.column-resize-bar 前面我们说了根据 textarea 效果实现，这里直接使用的 div 通过设置 resize: horizontal; 样式，让它也能拖动大小，通过拖动它撑开 .column-left 这个左侧容器，实现完整效果。

.resize-line 是拖拽可以使用时触发的展示效果，也可以不要，因为已经设置过 cursor 效果，只是没那么好看