Skip to content

Instantly share code, notes, and snippets.

@brumm
Last active December 19, 2023 03:51
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save brumm/74fd7eaafd50c8477519 to your computer and use it in GitHub Desktop.
Save brumm/74fd7eaafd50c8477519 to your computer and use it in GitHub Desktop.
Find out which element is scrolling
javascript:!function() { var slice = Array.prototype.slice; function throttle(type, name, obj) { obj = obj || window; var running = false; var func = function() { if (running) { return; } running = true; requestAnimationFrame(function() { obj.dispatchEvent(new CustomEvent(name)); running = false; }); }; obj.addEventListener(type, func); } slice .call(document.querySelectorAll("*")) .filter( e => e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight ) .filter(e => { var style = window.getComputedStyle(e); return [style.overflow, style.overflowX, style.overflowY].some( e => e === "auto" || e === "scroll" ); }) .forEach(e => { var color = Math.floor(Math.random() * 16777215).toString(16); e.style.backgroundColor = "#" + color; throttle("scroll", "optimizedScroll", e); e.addEventListener("scroll", event => { console.log("%c[scroll]", "color: white; background-color:#" + color, event.target); }); }); }()
(function() {
var slice = Array.prototype.slice;
function throttle(type, name, obj) {
obj = obj || window;
var running = false;
var func = function() {
if (running) {
return;
}
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
}
slice
.call(document.querySelectorAll("*"))
.filter(
e => e.scrollWidth > e.offsetWidth || e.scrollHeight > e.offsetHeight
)
.filter(e => {
var style = window.getComputedStyle(e);
return [style.overflow, style.overflowX, style.overflowY].some(
e => e === "auto" || e === "scroll"
);
})
.forEach(e => {
var color = Math.floor(Math.random() * 16777215).toString(16);
e.style.backgroundColor = "#" + color;
throttle("scroll", "optimizedScroll", e);
e.addEventListener("scroll", event => {
console.log("%c[scroll]", "color: white; background-color:#" + color, event.target);
});
});
})();
@brumm
Copy link
Author

brumm commented Jan 20, 2016

This snippet will apply a random background-color to any scrolling element on the page, and log the color-coded element to the console on scroll events

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment