纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小

举报
拿我格子衫来 发表于 2022/03/17 22:30:41 2022/03/17
【摘要】 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。 实现原理 CSS中有一个resize属性,如果一个元素的overflow...

利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

实现原理

CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这个元素尺寸。

但是,这种拉伸却有一个问题,那就是拖拽的区域太小了,就右下角那么一丢丢地方:

 

那有什么办法可以把这个拖拽区域变大呢?

后来经过我的研究发现,resize属性的拖拽bar和滚动条的拖拽bar是一个体系里面的东西,只需要对滚动条进行自定义,就能间接设置resize bar的尺寸。

例如:


  
  1. .resize-bar::-webkit-scrollbar {
  2. width: 200px; height: 200px;
  3. }

此时,拉伸区域就很大了:

接下来做的事情就是把这个拖拽区域藏在某一栏布局的后面,然后透出部分宽度可以用来拖拽,如下图所示:

 

最后,我们的左右分栏采用自适应布局就能实现我们想要的效果。

您可以狠狠地点击这里:纯CSS实现分栏宽度拉伸demo

 

代码如下:

 


  
  1. .column {
  2. overflow: hidden;
  3. }
  4. .column-left {
  5. height: 400px;
  6. background-color: #fff;
  7. position: relative;
  8. float: left;
  9. }
  10. .column-right {
  11. height: 400px;
  12. padding: 16px;
  13. background-color: #eee;
  14. box-sizing: border-box;
  15. overflow: hidden;
  16. }
  17. .resize-save {
  18. position: absolute;
  19. top: 0; right: 5px; bottom: 0; left: 0;
  20. padding: 16px;
  21. overflow-x: hidden;
  22. }
  23. .resize-bar {
  24. width: 200px; height: inherit;
  25. resize: horizontal;
  26. cursor: ew-resize;
  27. opacity: 0;
  28. overflow: scroll;
  29. }
  30. /* 拖拽线 */
  31. .resize-line {
  32. position: absolute;
  33. right: 0; top: 0; bottom: 0;
  34. border-right: 2px solid #eee;
  35. border-left: 1px solid #bbb;
  36. pointer-events: none;
  37. }
  38. .resize-bar:hover ~ .resize-line,
  39. .resize-bar:active ~ .resize-line {
  40. border-left: 1px dashed skyblue;
  41. }
  42. .resize-bar::-webkit-scrollbar {
  43. width: 200px; height: inherit;
  44. }
  45. /* Firefox只有下面一小块区域可以拉伸 */
  46. @supports (-moz-user-select: none) {
  47. .resize-bar:hover ~ .resize-line,
  48. .resize-bar:active ~ .resize-line {
  49. border-left: 1px solid #bbb;
  50. }
  51. .resize-bar:hover ~ .resize-line::after,
  52. .resize-bar:active ~ .resize-line::after {
  53. content: '';
  54. position: absolute;
  55. width: 16px; height: 16px;
  56. bottom: 0; right: -8px;
  57. background: url(./resize.svg);
  58. background-size: 100% 100%;
  59. }
  60. }

  
  1. <div class="column">
  2. <div class="column-left">
  3. <div class="resize-bar"></div>
  4. <div class="resize-line"></div>
  5. <div class="resize-save">
  6. 左侧的内容,左侧的内容,左侧的内容,左侧的内容
  7. </div>
  8. </div>
  9. <div class="column-right">
  10. 右侧的内容,右侧的内容,右侧的内容,右侧的内容
  11. </div>
  12. </div>

利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。

webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。

文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。

原文链接:fizzz.blog.csdn.net/article/details/92063430

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。