纯CSS如何实现分栏宽度拉伸调整-tutorial css-php.cn

纯CSS如何实现分栏宽度拉伸调整

藏色散人

Lepaskan： 2020-07-25 16:07:18

ke hadapan

3132 orang telah melayarinya

Html：

<p class="column">
    <p class="column-left">
        <p class="resize-bar"></p>
        <p class="resize-line"></p>
        <p class="resize-save">
            左侧的内容
        </p>                                            
    </p>
    <p class="column-right">
        右侧的内容
    </p>
</p

Salin selepas log masuk

css

.column {
    overflow: hidden;
}
.column-left {
    height: 400px;
    background-color: #fff;
    position: relative;
    float: left;
}
.column-right {
    height: 400px;
    padding: 16px;
    background-color: #eee;
    box-sizing: border-box;
    overflow: hidden;
}
.resize-save {
    position: absolute;
    top: 0; right: 5px; bottom: 0; left: 0;
    padding: 16px;
    overflow-x: hidden;
    
}
.resize-bar {
    width: 200px; height: inherit;
    resize: horizontal;
    cursor: ew-resize; 
    opacity: 0;
    overflow: scroll;
    max-width: 500px;//设定最大拉伸长度
    min-width: 200px;//设定最小宽度
}
/* 拖拽线 */
.resize-line {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    border-right: 2px solid #eee;
    border-left: 1px solid #bbb;
    pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
    border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
    width: 200px; height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        border-left: 1px solid #bbb;
    }
    .resize-bar:hover ~ .resize-line::after,
    .resize-bar:active ~ .resize-line::after {
        content: &#39;&#39;;
        position: absolute;
        width: 16px; height: 16px;
        bottom: 0; right: -8px;
        background: url(./resize.svg);
        background-size: 100% 100%;
    }
}

Salin selepas log masuk

原理

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

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

css3自由缩放属性resize

resize属性的语法及参数

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。

resize: none | both | horizontal | vertical | inherit

Salin selepas log masuk

在css3中 resize 属性指定的值分为以下几种。

none：用户不能拖动元素修改尺寸大小。
both：用户可以拖动元素，同时修改元素的高度和宽度
horizontal：用户可以拖动元素，仅可以改变元素的宽度，但不能修改元素的高度。
vertical：用户可以拖动元素，仅可以改变元素的高度，不能修改元素的宽度。
inherit：继承父元素的resize属性值

Atas ialah kandungan terperinci 纯CSS如何实现分栏宽度拉伸调整. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!