'Is it possible to find the function that caused page scroll

I am trying to find which function is causing the page to scroll when hovering an element, but so far I got nothing.

There is no specific listener attached to the element, from what I could understand it is triggered via a mouseover listener or similar, the elements contain lots of listeners attached to them.

Also this is not a browser function, it is specific to javascript because it doesn't occur when I null the majority of the code.

I already tried to nulling the scroll methods I know of like so:

[
    'scroll',
    'scrollTo',
    'scrollBy',
    'scrollByLines',
    'scrollByPages',
    'scrollX',
    'scrollY',
    'scrollMaxX',
    'scrollMaxY',
    'scrollHeight',
    'scrollIntoView',
    'scrollTop',
    'scrollTopMax'
].forEach(function(a) {
    window[a] = null;
    document.documentElement[a] = null;
})

Hoping that when the mysterious function tried to call the scroll method it would throw an error, but instead it still scrolls normally without any problems.

I also tried listening to the scroll event, but no returned argument brings me closer to the responsible function.

I have tried looking for it in the minified source code, but the common scroll search returns 266 results and I am not even sure if it is using a typical scroll method.

Is there any way that I can locate the function that is making the page scroll?

javascripthtmldebugging


Solution 1:[1]

In 2020, go to Chrome's Dev Tools, Sources tab, and on the right pane, scroll to the very bottom to find Event Listener Breakpoints.

There you'll find scroll inside the Control group. Clicking on the checkbox will stop execution (it's a breakpoint) whenever the scroll event is fired, and you'll be able to trace the code who did it in the same pane (right side), under the Call Stack group (it's probably the first group in the right pane after debugger kicks in).

enter image description here

Solution 2:[2]

We encountered a very similar unexpected scroll in our application recently and eventually narrowed down the culprit to Modernizr's CSS Hyphens feature detection.

Bug report here: https://github.com/Modernizr/Modernizr/issues/2172

As in your case, the scrolling was caused by a call to .focus(), so it eluded our initial searches for unwanted "scroll" code calls.

Solution 3:[3]

In my case was a Component with an input with the autoFocus property

<input type="text" autoFocus={true} />

I removed the property

<input type="text" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 colin moock
Solution 3 Fabiel León

Related Questions