当前位置：首页 > article >正文

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

article 2025/3/13 12:23:41

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

文章目录

前言
一、效果实现原理
二、代码演示
三.简单解释下样式
四完整的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 语法

.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 效果，只是没那么好看