Skip to content

Instantly share code, notes, and snippets.

@mqxu
Created November 3, 2019 12:15
Show Gist options
  • Save mqxu/3d0004b9d9f09476efd8ea984bb8c62c to your computer and use it in GitHub Desktop.
Save mqxu/3d0004b9d9f09476efd8ea984bb8c62c to your computer and use it in GitHub Desktop.
【iCSS:行为】使用resize拉伸分栏
<div class="bruce flex-ct-x">
<div class="stretching-column">
<div class="left">
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
<div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</div>
.stretching-column {
overflow: hidden;
border: 1px solid #09f;
width: 600px;
height: 300px;
line-height: 20px;
font-size: 16px;
color: #f90;
.left {
overflow: hidden;
float: left;
position: relative;
height: 100%;
}
.right {
overflow: hidden;
padding: 10px;
height: 100%;
background-color: #f0f0f0;
word-break: break-all;
}
}
.resize-bar {
overflow: scroll;
width: 200px;
height: 100%;
opacity: 0;
resize: horizontal;
&::-webkit-scrollbar {
width: 200px;
height: 100%;
}
&:hover,
&:active {
& ~ .resize-line {
border-left: 1px dashed #09f;
}
}
}
.resize-line {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-left: 1px solid #ccc;
border-right: 2px solid #f0f0f0;
pointer-events: none;
}
.resize-text {
overflow-x: hidden;
position: absolute;
left: 0;
right: 5px;
top: 0;
bottom: 0;
padding: 10px;
word-break: break-all;
}
<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment