js實現可調側欄

html

<div class="scalable">
  <div class="content">
    <img src="https://codingstartup.com/images/logo.svg" alt="">
  </div>
  <div class="separator">
    <i></i><i></i>
  </div>
</div>
<div class="main">
  <div class="content">
    Welcome to CodingStartup.
  </div>
</div>

css

body {
  display: flex;
  margin: 0;
  min-height: 100vh;
}
.scalable {
  background-color: #eee;
  position: relative;
  min-width: 100px;
}
.main {
  background-color: white;
  flex: 1;
}
.content {
  padding: 20px;
}
.scalable .separator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 100%;
  background-color: white;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .35);
  cursor: col-resize;
}

.scalable .separator i {
  display: inline-block;
  height: 14px;
  width: 1px;
  background-color: #e9e9e9;
  margin: 0 1px;
}

.scalable .content {
  padding-right: 34px;
}

.scalable .content img {
  display: block;
  max-width: 100%;
  margin: auto;
}

body {
  -webkit-user-select: none;
  user-select: none;
}

js

var startX, startWidth
startWidth = localStorage.getItem('scalable_width') || getScalableDivWidth()

document.querySelector('.scalable').style.width = startWidth + 'px'

document.querySelector('.separator').addEventListener('mousedown', startDrag)

function startDrag(e) {
  startX = e.clientX
  startWidth = getScalableDivWidth()
  
  document.documentElement.addEventListener('mousemove', onDrag)
  document.documentElement.addEventListener('mouseup', stopDrag)
}

function onDrag(e) {
  let newWidth = startWidth + e.clientX - startX
  document.querySelector('.scalable').style.width = newWidth + 'px'
}

function stopDrag(e) {
  localStorage.setItem('scalable_width', getScalableDivWidth())
  document.documentElement.removeEventListener('mousemove', onDrag)
  document.documentElement.removeEventListener('mouseup', stopDrag)
}

function getScalableDivWidth() {
  return parseInt(window.getComputedStyle(document.querySelector('.scalable')).width, 10)
}