83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
class WdeScrollBar{
|
|
// max = 0
|
|
// isDragged = false
|
|
/**
|
|
* @param {HTMLElement} handler
|
|
*/
|
|
constructor(handler){
|
|
console.log( handler.clientHeight)
|
|
let max = handler.parentElement.clientHeight - handler.clientHeight
|
|
let yOffset = null
|
|
let yPosInit = 0
|
|
handler.addEventListener('mousedown', (event) => {
|
|
// yOffset = event.offsetY
|
|
yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
|
|
|
|
|
|
|
|
// console.log()
|
|
document.addEventListener('mousemove', drag);
|
|
document.addEventListener('mouseup', stop)
|
|
//TODO Document dissallow select
|
|
})
|
|
|
|
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 yPos = Number(handler.style.top.replace('px', 0))
|
|
// console.log(event)
|
|
// console.log(yOffset)
|
|
// console.log(event.movementY)
|
|
|
|
// let pos = event.clientY - handler.clientHeight
|
|
|
|
|
|
// console.log(pos)
|
|
// let pos2 = yPos + event.movementY
|
|
// console.log(event.clientY - yPosInit)
|
|
// console.log(event.offsetY)
|
|
// yPos += event.yOffset
|
|
// handler.style.top = event.clientY - yPosInit + 'px'
|
|
// console.log(handler.Y)
|
|
// let pos = yPosInit - event.clientY
|
|
// let newPos = Math.min(Math.max(pos, 0), max)
|
|
// console.log(handler.style.top , event.offsetY)
|
|
// handler.style.top = event.clientY+ "px";
|
|
}
|
|
|
|
function stop() {
|
|
console.log("stop")
|
|
document.removeEventListener('mousemove', drag);
|
|
document.removeEventListener('mouseup', stop)
|
|
}
|
|
}
|
|
// /**
|
|
// * @param {HTMLElement} element
|
|
// */
|
|
// BindHandler(element) {
|
|
// element.addEventListener('mousedown', (event) => {
|
|
// this.isDragged =
|
|
// element.addEventListener('mouseup', this.stop);
|
|
// });
|
|
// element.removeEventListener
|
|
// }
|
|
|
|
// drag(){
|
|
|
|
// }
|
|
// stop(doc){
|
|
// console.log("stop")
|
|
// doc.removeEventListener('mouseup', (event) => {
|
|
// this.stop(document)
|
|
// });
|
|
// }
|
|
// MoveHandler(param) {
|
|
// console.log("Move")
|
|
// }
|
|
} |