Make scroll follow mouse or force (Trigger) wheel mouse

Question

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.

Can you create a reproducing example? What you have right now appears to be Typescript (and possibly a frontend library?) could you add the relevant tags, or convert the code to generic JS. — DBS, Jan 12 '22 at 11:33
I think that's will help you: https://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll — Yannis Haismann, Jan 12 '22 at 11:46

score 0 · Answer 1 · answered Jan 12 '22 at 16:51

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>

Make scroll follow mouse or force (Trigger) wheel mouse

1 Answers1