How to break on scrollTop change? - google-chrome-devtools

Question

One of js on my website causes unnecessary scroll to top of page. How to make a break in Chrome Developers Tools when js is changing scrollTop property?

Answer 1

Paste the code below and then run onVerticalScroll(function(){debugger});.
Note that this will only pause when the scroll position is set explicitly via JavaScript. For example, it won't trigger if a large element temporarily disappears from the page and causes the viewport to jump up.
function onVerticalScroll(fnOnScroll){
var originalScrollTop = getPropertyDescriptor(HTMLElement.prototype, "scrollTop");
Object.defineProperty(HTMLElement.prototype, "scrollTop", {
get: function(){
return originalScrollTop.get.apply(this, arguments);
},
set: function(){
fnOnScroll();
return originalScrollTop.set.apply(this, arguments);
}
});
var originalScrollTo = window.scrollTo;
window.scrollTo = function(){
fnOnScroll();
return originalScrollTo.apply(this, arguments);
}
var originalScrollBy = window.scrollBy;
window.scrollBy = function(){
fnOnScroll();
return originalScrollBy.apply(this, arguments);
}
function getPropertyDescriptor(object, propertyName){
var descriptor = Object.getOwnPropertyDescriptor(object, propertyName);
if (!object){
throw new Error("descriptor not found");
}
if (!descriptor) {
return getPropertyDescriptor(Object.getPrototypeOf(object), propertyName);
}
return descriptor;
}
}