如何将div作为滚动条？

<div class="scroll-container">
  <div class="content">
    <!-- 这里是需要滚动的内容 -->
  </div>
  <div class="scroll-bar"></div>
</div>

.scroll-container {
  position: relative;
  height: 300px; /* 设置父容器的高度 */
  overflow: hidden;
}

.content {
  width: 100%;
  /* 其他样式 */
}

.scroll-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px; /* 设置滚动条的宽度 */
  height: 100%;
  background-color: #ccc; /* 设置滚动条的颜色 */
  /* 其他样式 */
}

var content = document.querySelector('.content');
var scrollbar = document.querySelector('.scroll-bar');

// 监听鼠标滚轮事件
content.addEventListener('mousewheel', function(event) {
  // 根据滚动方向和滚动距离计算滚动条应该滚动的位置
  var delta = event.wheelDelta / 120 || -event.detail / 3;
  var scrollPos = content.scrollTop - delta * 10;

  // 设置滚动条子容器的top属性来实现滚动效果
  scrollbar.style.top = scrollPos + 'px';

  // 设置内容容器的scrollTop属性来实现滚动效果
  content.scrollTop = scrollPos;

  event.preventDefault();
});