I am trying to make the scroll follow the mouse height, I know it seems easy, but I do not manage to do it correctly,
I was trying something like this, this function is fired always that the mouse moves.
function moveScroll ($event){
var height = $event.event.clientY;
window.scrollTo(0, height);
}
This seems not working, specially when I am in a webpage with an iframe inside. The other option I thought is forcing the mouse wheel click event, which would be awesome, but I can't manage to do it either...
I am running out of ideas, so if you could give me a helping hand, it'd be awesome.
ah, saw this question and had a go at it.. I have one interval, 3 global variables and one callback for the mousedown event
var constX=0, constY=0, constant=7
//the lower the value of constant, the faster the scrolling(1 scrolls the difference of center and your cursor instantly, 3 scrolls 1/3 of that difference and so forth)
//spotX and spotY are for creating a "safe space" in the center of one's screen that won't scroll once your mouse is in those boundaries
//width scroll boundary is currently 1/2 the screen's width(1/4 screen on each horizontal half of the middle)
//height scroll boundary is currently 1/3 of the screen's height(1/6 screen on each vertical half of the middle)
var centerX=innerWidth/2, centerY=innerHeight/2
let s=setInterval(()=>{
const {round}=Math
let x=round( ((constX-centerX)/constant)+scrollX )
let y=round( ((constY-centerY)/constant)+scrollY )
if(constX===0){x=scrollX} if(constY===0){y=scrollY}
window.scrollTo(x,y)
},30)
function moveScroll(ev){
centerX=innerWidth/2, centerY=innerHeight/2
var spotX=innerWidth/4, spotY=innerHeight/6
var [height,width]=[ev.clientY,ev.clientX]
let isSpotX=Math.abs(width-centerX)<=spotX
let isSpotY=Math.abs(height-centerY)<=spotY
if(isSpotX&&isSpotY){return constX=0, constY=0} //comment this line out to disable the safe space logic
constX=width, constY=height
}
window.addEventListener('mousemove',moveScroll)<div id="here" style="width:8000px;height:6000px"></div>
<script>
//this block is for filling a scroll area with colour
(()=>{
let list=["lightblue","red","purple","yellow","green","orange","teal","brown","black"], i=0
for(let y=0;y<60;y++){
let span=document.createElement('div')
for(let x=0;x<80;x++){
let div=document.createElement('div')
div.style["background-color"]=list[i++%list.length]
div.style.height="100px", div.style.width="100px"
span.appendChild(div)
}
span.style.display="flex"
document.getElementById('here').appendChild(span)
}
})()
</script>