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

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

文章目录


前言

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


一、效果实现原理

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

二、代码演示

HTML 结构

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


四 完整的DEMO

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

总结

样式里面还有一些细节,比如可拖拽的范围只能通过滚动条的宽度设置,必须设置 overflow: scroll 才会显示拖拽的范围等,具体其他的细节可以详细看看CSS 代码,上方demo 中有完整的使用效果。

以上信息如有疏漏或错误欢迎指正,谢谢。

相关推荐
coding随想7 分钟前
HTML5插入标记的秘密:如何高效操控DOM而不踩坑?
前端·html
༺ཌༀ傲世万物ༀད༻7 分钟前
前端与后端部署大冒险:Java、Go、C++三剑客
java·前端·golang
TheRedAce15 分钟前
状态未保存,拦截页面跳转通用方法
前端
袁煦丞16 分钟前
小雅全家桶+cpolar影音库自由随身:cpolar内网穿透实验室第519个成功挑战
前端·程序员·远程工作
前端Hardy20 分钟前
HTML&CSS:超丝滑抛物线飞入购物车效果
前端·javascript·css
VisuperviReborn21 分钟前
打造自己的前端监控---前端错误监控
前端·javascript·vue.js
WindrunnerMax24 分钟前
从零实现富文本编辑器#6-浏览器选区与编辑器选区模型同步
前端·前端框架·github
汪子熙24 分钟前
聊一聊 TypeScript 里的类型别名
前端·javascript
程序视点29 分钟前
【2025最新】Cursor安装-订阅-使用全流程指南!你不得不用的AI编程神器!
前端·后端·cursor
赵小川33 分钟前
五年自学前端到京东终面:我才明白自己不是范进,连范进都不如
前端