Scrolling screenshot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow"> <meta name="description" content="ShareX is a free and open source program that lets you capture or record any area of your screen and share it with a single press of a key. It also allows uploading images, text or other types of files to many supported destinations you can choose from."> <meta name="author" content="ShareX Team"> <meta name="generator" content="Jekyll v3.10.0"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scrolling screenshot - ShareX</title> <script type="application/ld+json"> { "@context" : "https://schema.org", "@type" : "WebSite", "name" : "ShareX", "url" : "https://getsharex.com" } </script>  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@ShareX"> <meta name="twitter:title" content="ShareX - The best free and open source screenshot tool for Windows"> <meta name="twitter:description" content="ShareX is a free and open source program that lets you capture or record any area of your screen and share it with a single press of a key. It also allows uploading images, text or other types of files to many supported destinations you can choose from."> <meta name="twitter:image" content="https://getsharex.com/img/ShareX_Card_Large.png">  <meta property="og:type" content="website" /> <meta property="og:title" content="ShareX - The best free and open source screenshot tool for Windows" /> <meta property="og:url" content="https://getsharex.com/docs/scrolling-screenshot.html" /> <meta property="og:image" content="https://getsharex.com/img/ShareX_Card_Large.png" /> <meta property="og:description" content="ShareX is a free and open source program that lets you capture or record any area of your screen and share it with a single press of a key. It also allows uploading images, text or other types of files to many supported destinations you can choose from." /> <link rel="icon" href="/favicon.ico"> <meta name="theme-color" content="#174974"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto+Condensed:wght@400&display=swap" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/fontawesome.all.min.css" rel="stylesheet"> <link href="/css/jquery.fancybox.min.css" rel="stylesheet"> <link href="/css/main.css?1739826917" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md"> <div class="container "> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span> <i class="fa-solid fa-bars"></i> </span> </button> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav nav-main mr-auto"> <li class="nav-item"><a class="nav-link" href="/">Home</a></li> <li class="nav-item"><a class="nav-link" href="/downloads">Downloads</a></li> <li class="nav-item"><a class="nav-link" href="/changelog">Changelog</a></li> <li class="nav-item"><a class="nav-link" href="/screenshots">Screenshots</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Other</a> <div class="dropdown-menu"> <a class="dropdown-item" href="/image-effects">Image effects</a> <a class="dropdown-item" href="/actions">Actions</a> <a class="dropdown-item" href="/docs/dev-builds">Dev builds</a> <a class="dropdown-item" href="/docs/keybinds">Keybinds</a> <a class="dropdown-item" href="/docs/scrolling-screenshot">Scrolling screenshot</a> <a class="dropdown-item" href="/docs/command-line-arguments">Command line arguments</a> <a class="dropdown-item" href="/docs/translation">Translation</a> <a class="dropdown-item" href="/docs/ocr">OCR</a> <a class="dropdown-item" href="/docs/custom-uploader">Custom uploader</a> <a class="dropdown-item" href="/docs/amazon-s3">Amazon S3 guide</a> <a class="dropdown-item" href="/docs/google-cloud-storage">Google Cloud Storage guide</a> <a class="dropdown-item" href="/docs/cloudflare-r2">Cloudflare R2 guide</a> <a class="dropdown-item" href="/brand-assets">Brand assets</a> <a class="dropdown-item" href="https://github.com/topics/sharex">ShareX related projects on GitHub</a> </div> </li> <li class="nav-item"><a class="nav-link" href="/donate">Donate</a></li> </ul> <ul class="navbar-nav nav-links"> <li class="nav-item"><a class="nav-link" href="https://github.com/ShareX/ShareX" data-toggle="tooltip" data-placement="bottom" title="GitHub"> <i class="fa-brands fa-github fa-fw"></i></a></li> <li class="nav-item"><a class="nav-link" href="https://x.com/ShareX" data-toggle="tooltip" data-placement="bottom" title="X"> <i class="fa-brands fa-x-twitter fa-fw"></i></a></li> <li class="nav-item"><a class="nav-link" href="https://discord.gg/ShareX" data-toggle="tooltip" data-placement="bottom" title="Discord"> <i class="fa-brands fa-discord fa-fw"></i></a></li> <li class="nav-item"><a class="nav-link" href="https://www.reddit.com/r/sharex" data-toggle="tooltip" data-placement="bottom" title="Reddit"> <i class="fa-brands fa-reddit-alien fa-fw"></i></a></li> </ul> </div> </div> </nav> <div class="jumbotron jumbotron-compact"> <div class="container"> <h1> <a href="/">ShareX</a> </h1> <p>Scrolling screenshot</p> </div> </div> <div> <div class="container markdown"> <h2 id="what-is-scrolling-screenshot">What is scrolling screenshot?</h2> <p>Scrolling screenshot, also known as scrolling capture, is a feature in ShareX that allows you to capture an entire webpage or document that extends beyond the visible screen. It automatically combines multiple screenshots into a single image, giving you a complete view of the content.</p> <h2 id="how-to-take-a-scrolling-screenshot">How to take a scrolling screenshot?</h2> <p>To take a scrolling screenshot in ShareX, follow these steps:</p> <ol> <li>Open ShareX main window or tray menu.</li> <li>Go to "Capture -> Scrolling capture" menu option.</li> <li>Alternatively, you can create a custom hotkey for "Start/Stop scrolling capture" in the hotkey settings window.</li> <li>Make a region selection to define the area you want to capture.</li> <li>Once the region is selected, the scrolling capture will automatically start.</li> <li>ShareX will scroll and capture the content until it reaches the end of the scroll.</li> <li>Finally, ShareX will display the result image of the scrolling capture.</li> </ol> <h2 id="status-indicator">Status indicator</h2> <p>After the scrolling capture is complete, a status indicator is shown at the top right corner.</p> <p>The indicator colors have the following meanings:</p> <ul> <li>Green: The capture is successful.</li> <li>Yellow: The capture is partially successful. It couldn't perfectly match one or more images and used the best guess to combine them.</li> <li>Red: The first two images couldn't be combined, and as a result, the scrolling capture was automatically stopped.</li> </ul> <h2 id="how-scrolling-capture-works-in-sharex">How scrolling capture works in ShareX?</h2> <ol> <li>ShareX takes an initial screenshot of the visible portion of the webpage/document.</li> <li>It then compares subsequent screenshots with the previous one to identify any changes.</li> <li>If changes are detected, ShareX cuts the top part of the new screenshot and appends the bottom part to the end of the previous screenshot.</li> <li>This process continues until the entire webpage/document is captured.</li> </ol> <h2 id="common-problems-and-solutions">Common problems and solutions</h2> <h3 id="static-elements">Static elements</h3> <p>If there are static elements on the webpage, such as footers or sidebars, ShareX may struggle to find an exact match between screenshots. As a result, the scrolling capture may fail or produce inaccurate results.</p> <p>To avoid this issue, we recommend making a custom region selection by holding the left mouse button and dragging to capture only the desired content. This way, you can exclude any static elements that may interfere with the scrolling capture process.</p> <h3 id="animated-elements">Animated elements</h3> <p>Animated elements, such as videos, GIFs, or dynamic content, can also pose a challenge for scrolling capture. Since these elements are constantly changing, ShareX may not be able to find a consistent match between screenshots.</p> <p>Similar to the previous problem, making a custom region selection can help exclude animated elements from the capture. By manually selecting the desired content, you can ensure a more accurate and reliable scrolling capture.</p> <h3 id="hover-related-issues">Hover-related issues</h3> <p>Another common challenge in scrolling capture is related to hover effects. When scrolling, if the cursor moves over a section of the webpage with hover effects, it can trigger changes in the appearance, such as background color or highlighting. This can result in inaccurate or inconsistent captures.</p> <p>To mitigate this issue, it is recommended to move the cursor away from the content, preferably to the top of the scroll bars. By doing so, you can minimize the chances of triggering hover effects during the scrolling capture process.</p> </div> </div> <script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.bundle.min.js"></script> <script> var anchorForId = function (id) { var anchor = document.createElement("a"); anchor.className = "header-link"; anchor.href = "#" + id; anchor.innerHTML = "<i class=\"fas fa-link\"></i>"; return anchor; }; var linkifyAnchors = function (level, containingElement) { var headers = containingElement.getElementsByTagName("h" + level); for (var h = 0; h < headers.length; h++) { var header = headers[h]; if (typeof header.id !== "undefined" && header.id !== "") { header.appendChild(anchorForId(header.id)); } } }; document.onreadystatechange = function () { if (this.readyState === "complete") { var contentBlock = document.getElementsByClassName("markdown")[0]; if (!contentBlock) { return; } for (var level = 1; level <= 6; level++) { linkifyAnchors(level, contentBlock); } } }; </script> <footer> <div> <a class="shields" href="https://github.com/ShareX/ShareX/stargazers" data-toggle="tooltip" data-placement="top" title="GitHub"> <img src="https://img.shields.io/github/stars/ShareX/ShareX?label=Star&style=social" alt="GitHub" /></a> <a class="shields" href="https://x.com/intent/follow?screen_name=ShareX" data-toggle="tooltip" data-placement="top" title="X"> <img src="https://img.shields.io/twitter/follow/ShareX" alt="X" /></a> <a class="shields" href="https://discord.gg/ShareX" data-toggle="tooltip" data-placement="top" title="Discord"> <img src="https://img.shields.io/discord/194170124859736065?label=Join&logo=Discord&style=social" alt="Discord" /></a> <a class="shields" href="https://www.reddit.com/r/sharex" data-toggle="tooltip" data-placement="top" title="Reddit"> <img src="https://img.shields.io/reddit/subreddit-subscribers/ShareX?label=Follow&style=social" alt="Reddit" /></a> <p>Copyright © 2007-2025 <a href="https://github.com/orgs/ShareX/people">ShareX Team</a> 路 <a href="/privacy-policy">Privacy Policy</a></p> </div> </footer> <script> $(document).ready(function() { $('[data-toggle="tooltip"]:not([title=""])').tooltip({ trigger: "hover" }); }); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-TSRVCS0KMR"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-TSRVCS0KMR'); </script> </body> </html>

CINXE.COM

Scrolling screenshot - ShareX