class WdeScrollBar{ /** * @param {HTMLElement} scrollBarContainer * @param {HTMLElement} content */ constructor(scrollBarContainer, content){ let nonNativeScroll = false // console.log(scrollBarContainer) let handler = scrollBarContainer.children[0] handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px' let max = handler.parentElement.clientHeight - handler.clientHeight let yPosInit = 0 handler.addEventListener('mousedown', (event) => { nonNativeScroll = true yPosInit = event.clientY - Number(handler.style.top.replace('px','' )) document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stop) }) content.addEventListener('scroll', (event) =>{ if (!this.nonNativeScroll){ let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength handler.style.top = content.scrollTop/coefficient + 'px' } }) function drag() { // console.log(event.clientY - yPosInit, Number(handler.style.top.replace('px','' ))) let pos = event.clientY - yPosInit let clampPos = Math.min(Math.max(pos, 0), max) handler.style.top = clampPos + "px"; let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength // console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient) content.scrollTop = clampPos* coefficient } function stop() { // console.log("stop") document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stop) nonNativeScroll = false } } }