CODEWITHSUNDEEP
javascript
HeelMega
HeelMega

Reputation: 518

ScrollTop and ScrollLeft in Javascript

I am trying to convert jQuery into plain JS.

My issue is that I can't seem to find an equivalent for these two lines:

$(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); 
$(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));

Here is my full code:

$(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  $(window).mousemove(function(m){
    if(curDown === true){
     $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); 
     $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));
    }
  });

  $(window).mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });

  $(window).mouseup(function(){
    curDown = false;
  });
})

CodePen

Upvotes: 1

Views: 379

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

Use below cross browser solution which using pure JavaScript:

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var scrollLeft = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

Upvotes: 1

Related Questions