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