JavaScript window.scrollTo Alternative

Question

I'm writing a specific javascript plugin for a specific website.

In one of my methods i want to use window.scrollTo but unfortunately the site owner has overridden the native functionality of this function (also window.scroll).

So i'm thinking about 2 possible solutions:

Write my own myScrollTo implementation
Somehow detect if the native function is overridden and call the native function.

If you have any ideas on this, i will be very glad to hear them :)

Thanks.

there's also `window.scroll` which is basically identical. Is it overridden as well? — Prinzhorn, Feb 21 '16 at 17:05

score 3 · Accepted Answer · answered Feb 21 '16 at 17:52

Well you can create an iframe and use its window instance to get the native implementation of scrollTo. The following code should work

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
window.altScrollTo = iframe.contentWindow.scrollTo;

Now you should be able to use it as below

aScrollTo.call(window, 0, 600)

score 1 · Answer 2 · edited May 23 '17 at 11:44

Well it's not the perfect solutions but is suites my current needs.

First i will check if the native function is overridden with this helpful piece of code :

function isFuncNative(f) {
       return !!f && (typeof f).toLowerCase() == 'function' 
       && (f === Function.prototype 
       || /^\s*function\s*(\b[a-z$_][a-z0-9$_]*\b)*\s*\((|([a-z$_][a-z0-9$_]*)(\s*,[a-z$_][a-z0-9$_]*)*)\)\s*{\s*\[native code\]\s*}\s*$/i.test(String(f)));
}

Source: https://stackoverflow.com/a/7536972/3009194

Then i will try the alternatives : window.scroll as the is no difference between window.scroll() and window.scrollTo()

And finally if this one is also overridden, i guess i will use document.body.scrollTop

Yes i know, there is a possibility that the body is not the scrolling Element. Unfortunately the document.scrollingElement is still a draft and not supported in most browsers.

So the final code will look something like this:

   function myScroll(left, top) {
       if (isFuncNative(window.scrollTo)) {
           window.scrollTo(left, top);
       } else if (isFuncNative(window.scroll)) {
           window.scroll(left, top);
       } else {
           document.body.scrollLeft = left;
           document.body.scrollTop = top;
       }
   }

   myScroll(0,150);

score 0 · Answer 3 · answered Jun 01 '23 at 07:58

0

You can use the scrollIntoView method.

const element = document.getElementById("content");
element.scrollIntoView();

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

answered Jun 01 '23 at 07:58

Ali Bektash

572
5
15

JavaScript window.scrollTo Alternative

3 Answers3