欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > 使用纯CSS 实现 侧边栏 拖拽效果

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

2025/3/16 23:27:16 来源:https://blog.csdn.net/rudy_zhou/article/details/146205871  浏览:    关键词:使用纯CSS 实现 侧边栏 拖拽效果

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

文章目录

  • 前言
  • 一、效果实现原理
  • 二、代码演示
  • 三.简单解释下样式
  • 四 完整的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 效果,只是没那么好看


四 完整的DEMO

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

总结

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词