SOURCE

// 抽屉部分
let offsetX = 0;
const elDrawer = document.getElementById("j-com-drawer");
const minX = 0 - elDrawer.offsetWidth;
const at = new AnyTouch(elDrawer);

at.on("panmove", ({ deltaX }) => {
  offsetX += deltaX;
  if (0 <= offsetX) {
    offsetX = 0;
  }
  elDrawer.style.transform = `translateX(${offsetX}px)`;
});

at.on("panend", () => {
  offsetX = minX / 2 < offsetX ? 0 : minX;
  elDrawer.style.transform = `translateX(${offsetX}px)`;
  elDrawer.classList.toggle(animated, true);
});

// 把手
const elHandler = document.getElementById("j-com-drawer-handler");
const atHandler = new AnyTouch(elHandler, { isPreventDefault: false });
atHandler.on("panmove", ({deltaX}) => {
  offsetX+= deltaX;
  offsetX = 0 < offsetX ? 0 : offsetX;
  elDrawer.style.transform = `translateX(${offsetX}px)`;
});

<!-- 触发把手 -->
<div class="com-drawer-handler" id="j-com-drawer-handler">
</div>
<!-- 抽屉 -->
<div class="com-drawer" id="j-com-drawer">
  <img class="avator" src="https://s.cdpn.io/profiles/user/406915/80.jpg?1511329408"
  width="100%">
  <p align="center">
    铁皮饭盒
  </p>
  <a class="github" target="_blank" href="https://github.com/383514580/any-touch">
    github : any-touch
  </a>
  <div>
    <script src="https://unpkg.com/any-touch/dist/AnyTouch.umd.js">
    </script>

body {
  background: #eee;
}

.com-drawer-handler {
  height: 100vh;
  background: rgba(252, 252, 252, 0);
  width: 45px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

.com-drawer {
  background: #fff;
  padding: 30px;
  height: 100vh;
  min-width: 10vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
  .avator {
    touch-action: none;
    display: block;
    width: 60%;
    border-radius: 100%;
    margin: 15px auto;
  }
  .github {
    padding: 5px 15px;
    background: #000;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 6px;
    margin-top: 60px;
  }
}

.animated {
  transition: all 200ms;
}