Search code examples
javascriptcssscrollbarbookmarklet

Bookmarklet to hide scrollbars of web page

I want to take a fullscreen screenshot of a web page. I want it to contain only relevant information. I set the zoom level and scroll the relevant part into view. From this point on, I want to hide the unnecessary scrollbars to exclude them from the screenshot and maximize space for relevant content.

Example screenshot:

Screenshot of stackoverflow.com zoomed to detail with scroolbars

I was thinking of a bookmarklet or a snippet of JavaScript to run in the DevTools. For the hiding itself, I can certainly use a solution from Hide scroll bar while still being able to scroll or Hiding the scroll bar on an HTML page and related posts.

But I don't know which element has the scrollbars, and there may be more than one. How can I find the DOM elements with scrollbars and hide them?

Solution

  • Try this

    <a href="javascript:(() => { const style = document.createElement('style');
style.textContent = `html { scrollbar-width: none; }
 ::-webkit-scrollbar { width: 0px; }`;
document.head.appendChild(style);})()`">Right-click and save as a URL in a bookmark</a>