直接上html代码
根据大佬的代码进行改进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.column {
display: flex;
width: 100vw;
}
.column-left {
height: 400px;
background-color: #fff;
position: relative;
}
.column-right {
flex: 1;
height: 400px;
background-color: #eee;
overflow: hidden;
}
/* 左侧显示块 */
.resize-save {
position: absolute;
top: 0;
/* 给拖拽区域留下空间 */
right: 5px;
bottom: 0;
left: 0;
overflow-x: hidden;
}
/* 在左侧显示块的下面 只占有3px宽的空间可拖动区域 */
.resize-bar {
width: 400px;
min-width: 400px;
max-width: 800px;
height: inherit;
/* 方向 */
resize: horizontal;
/* cursor: ew-resize; */
cursor: col-resize;
/* 让他隐藏 */
opacity: 0;
overflow: scroll;
}
/* 拖拽线 */
.resize-line {
position: absolute;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
border-right: 2px dashed rgb(73, 181, 224);
}
/* 设置拖动的scrollbar宽度 */
.resize-bar::-webkit-scrollbar {
width: 400px;
min-width: 400px;
max-width: 800px;
height: inherit;
}
/* 针对Firefox显示右边框和右下角的16x16的拖拽块 */
@supports (-moz-user-select: none) {
.resize-bar:hover ~ .resize-line::after,
.resize-bar:active ~ .resize-line::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
bottom: 0;
right: -8px;
/* background: url(./resize.svg); */
background-color: red;
background-size: 100% 100%;
}
}
</style>
</head>
<body>
<div class="column">
<div class="column-left">
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-save">
左侧的内容,左侧的内容,左侧的内容,左侧的内容
左侧的内容,左侧的内容,左侧的内容,左侧的内容
左侧的内容,左侧的内容,左侧的内容,左侧的内容
左侧的内容,左侧的内容,左侧的内容,左侧的内容
</div>
</div>
<div class="column-right">
右侧的内容,右侧的内容,右侧的内容,右侧的内容
</div>
</div>
</body>
</html>