使用 JS 创建自定义滚动条

Question

我正在尝试使用 JS 创建滚动条。我知道以前有人做过，但我想自己做一个。

我很难设置滚动拇指的“滚动位置”，它似乎拖到后面并且行为很奇怪，我想我太愚蠢了，无法自己思考这个问题。

任何帮助都会很棒:) 我用评论突出了这个问题，所以你不需要查看所有不必要的东西

<div id = "wrapper">
        
        <div id="content">
            <ul>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
                <li>
                    helloworld
                </li>
            </ul>
        </div>
    </div>

Object.prototype.SetStyleObject = function(styleObject) {
  for (var key in styleObject) {
    this.style[key] = styleObject[key];
  }
};

function clamp(value, min, max) {
  return value > max ? max : value < min ? min : value;
}
const styles = {
  scrollbar: {
    right: '0px',
    position: 'absolute',
    width: '20px',
    height: '100%',
    background: 'red'
  },
  scrolltrack: {
    position: 'relative',
    height: '100%',
    width: '100%'
  },
  scrollthumb: {
    position: 'absolute',
    width: '100%',
    height: '20px',
    borderRadius: '10px',
    top: '0px',
    backgroundColor: 'green'
  }
}

function SetScrollbar(wrapper, content) {
  let scrollbar = null,
    scrolltrack = null,
    scrollthumb = null,
    MousePos = null,
    GetMousePos = null;
  thumbHeight = 0;

  function CreateScrollElem(className, style) {
    let div = document.createElement("div");
    div.SetStyleObject(style);
    div.className = className;
    return div;
  }

  function createScrollBar() {
    scrollbar = CreateScrollElem("scrollbar", styles.scrollbar);
    scrolltrack = CreateScrollElem("scrolltrack", styles.scrolltrack);
    scrollthumb = CreateScrollElem("scrollthumb", styles.scrollthumb);
    scrolltrack.appendChild(scrollthumb);
    scrollbar.appendChild(scrolltrack);
    wrapper.appendChild(scrollbar);
    SetThumbHeight();
    SetScrollEvents();
  }

  function SetThumbHeight() {
    thumbHeight = scrollbar.clientHeight * (wrapper.clientHeight / content.clientHeight);
    scrollthumb.style["height"] = thumbHeight + "px";
  }

  function SetThumbPosition() {
  /*
    my problem below
  */
    let scrollAmount = (window.mouseY - ((scrollbar.clientHeight) - window.clickPos));
    scrollthumb.style["top"] = clamp(scrollAmount, 0, scrollbar.clientHeight - thumbHeight) + "px";
  }

  function SetScrollEvents() {
    scrollthumb.addEventListener("mousedown",
      function(e) {
        window.clickPos = e.pageY;
        window.addEventListener("mousemove", GetMousePos = (e) => {
          window.mouseY = e.pageY
        });
        MousePos = setInterval(SetThumbPosition, 16);
      }
    )
    window.addEventListener("mouseup",
      function(e) {
        window.removeEventListener("mousemove", GetMousePos)
        clearInterval(MousePos)
      }
    )
  }
  createScrollBar();
}
const content = document.getElementById("content");
const wrapper = document.getElementById("wrapper");

SetScrollbar(wrapper, content)

#wrapper {
  height: 150px;
  width: 250px;
  overflow: hidden;
  position: relative;
}
#content {
  position: absolute;
}

<div id="wrapper">
  <div id="content">
    <ul>
      <li> helloworld</li>
      <li> helloworld </li>
      <li> helloworld </li>
      <li> helloworld </li>
      <li> helloworld</li>
      <li> helloworld </li>
      <li> helloworld </li>
      <li> helloworld </li>
      <li> helloworld</li>
      <li> helloworld </li>
      <li> helloworld </li>
      <li> helloworld </li>
    </ul>
  </div>
</div>

Answer 1

有一个很酷的 own-scrolls 库 https://www.npmjs.com/package/own-scrolls 允许您自定义滚动，而不会为 vanilla js 上的项目带来不必要的问题