cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add scroll calculations

Browse Source
This commit is contained in:
cyber-dream 2023-03-21 15:38:51 +03:00
parent c5f55c807a
commit fa6ecea0f0
1 changed files with 23 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
resources/sys/wde/wde-scrollbar.js
View File

@ -1,83 +1,49 @@
class WdeScrollBar{
// max = 0
// isDragged = false
/**
* @param {HTMLElement} handler
* @param {HTMLElement} content
*/
constructor(handler){
console.log( handler.clientHeight)
constructor(handler, content){
let nonNativeScroll = false
handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
let max = handler.parentElement.clientHeight - handler.clientHeight
let yOffset = null
let yPosInit = 0
handler.addEventListener('mousedown', (event) => {
// yOffset = event.offsetY
nonNativeScroll = true
yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
// console.log()
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stop)
//TODO Document dissallow select
})
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','' )))
// 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)
// 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";
content.scrollTop = clampPos* coefficient
}
function stop() {
console.log("stop")
// console.log("stop")
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stop)
nonNativeScroll = false
}
}
// /**
// * @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")
// }
}