Prevent javascript-initiated scrolling

Question

There are many questions about preventing user-initiated (i.e., mouse, touch, keyboard) scrolling via javascript. In this case, I am creating a component within a CMS that needs to stop another CMS component from scrolling itself into view. I do not have access to the other CMS component's code (which is also heavily obfuscated).

I have tried disabling typical ways of forcing scrolling with the following code, yet the other CMS still scrolls into view, a second or two after the following code runs:

  Element.prototype.scrollIntoView = function(alignWithTop){
    console.log("******** scrollIntoView: " + this.getAttribute("id"));
  };

  Element.prototype.scrollIntoViewIfNeeded = function(alignWithTop){
    console.log("******** scrollIntoViewIfNeeded: " + this.getAttribute("id"));
  };

  Element.prototype.scrollByLines = function(){
    console.log("******** scrollByLines: " + this.getAttribute("id"));
  };

  Element.prototype.scrollByPages = function(){
    console.log("******** scrollByPages: " + this.getAttribute("id"));
  };

  Element.prototype.focus = function(){
    console.log("******** focus: " + this.getAttribute("id"));
  };

  window.scroll = function(xpos,ypos){
    console.log("******** scroll: " + xpos+","+ypos);
  }

  window.scrollTo = function(xpos,ypos){
    console.log("******** scrollTo: " + xpos+","+ypos);
  }

  window.scrollBy = function(xpos,ypos){
    console.log("******** scrollBy: " + xpos+","+ypos);
  }

  jQuery.fn.scrollTop = function(){
    console.log("!!!!!!!! scrollTop");
  };

  jQuery.fn.animate = function(){
    console.log("!!!!!!!! animate");
  };

  jQuery.fn.click = function(){
    console.log("!!!!!!!! click");
  };

I can set window.onscroll to force a call to window.scrollTo(0,0) for a period of time, but that seems unsatisfactory since it looks jumpy and prevents user-initiated scrolling, which I do not want to prevent.

Is there some other way javascript (or jQuery) can force a scroll that I am missing in the above code?

"Scrolling itself into view" - Is it an animation effect like fade-in or something? — Vandesh
– Vandesh, Commented Jun 10, 2014 at 11:36
By "Scrolling itself into view" I mean that my component should be at the top of the page, with the CMS-supplied component below, nominally scrolled off the bottom of the page. But when it loads, the CMS-supplied component scrolls up into view. — Mike Godin
– Mike Godin, Commented Jun 10, 2014 at 12:27

Mike Godin · Accepted Answer · 2014-09-10 15:30:15Z

1

So this should have been obvious, but the function the CMS was calling was HTMLElementObject.focus(), so the following is the code I used to stop the unwanted scrolling during page load and setup:

// Stop the page from jumping around for a little while
var oldFocus = Element.prototype.focus;
Element.prototype.focus = function(){};
setTimeout(
  function(){
    Element.prototype.focus = oldFocus;
  },5000);

answered Sep 10, 2014 at 15:30

Mike Godin

4,0464 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent javascript-initiated scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related