Recent development has a requirement for horizontal/vertical drag ability. At the beginning, dom operation was adopted, but the lag phenomenon was obvious and the experience was too poor. I thought about whether the problem was stuck due to too frequent operation, so I tried anti-shake and throttling again, but the effect was not obvious. Suddenly, CSS has a resize property to do this.

One, horizontal split screen

<div class="demo">
    <div class="left">
        <div>000</div>
    </div>
    <div class="right">right</div>
</div>
Copy the code

css:

.demo{ display:flex; height:200px; } .left{ min-width:200px; max-width: 1000px; background: #ccc; resize:horizontal; overflow:scroll; margin-right: 10px; height:200px; opacity:1; } .left::-webkit-scrollbar { width: 20px; // The width of the scroll bar is the height: inherit; } .right{ background: #f0f; margin-left: 10px; flex: 1 }Copy the code

There is a problem above, the content in left is not displayed. And there’s something wrong with the scrollbar style

What we need is the following:

So we need to make a few changes to the above code:

<div class="demo">
    <div class="demo-left">
        <div class="left"></div>
        <div class="left-content">left</div>
    </div>
    <div class="right">right</div>
</div>
Copy the code

css:

.demo{
  display:flex;
  height:200px;
}
.demo-left{
  position: relative;
}
.left{
  min-width:200px;
  max-width: 1000px;
  background: #ccc;
  resize:horizontal;
  overflow:scroll;
  margin-right: 10px;
  height:200px;
  opacity:0;
  position: relative;
  z-index: 1;
}
.left-content{
  position: absolute;
  width: 100%;
  height:200px;
  background:#0f0;
  color:#000;
  left: 0;
  top:0;
}
.left::-webkit-scrollbar {
    width: 20px;
    height: inherit;
}
.right{
  background: #f0f;
  margin-left: 10px;
  flex: 1
}
Copy the code

The above effects can be viewed on Codepen

Two, vertical direction

The original is similar, click here to view

3. Resize attribute

The resize attribute specifies whether an element can be resized by the user.

Grammar:

resize:none | both | horizontal | vertical

  • None: The user cannot resize the element (default)
  • Both: user adjustable height and width of elements
  • Horizontal: User can adjust the width of the element
  • Vertical: users can adjust the height of elements