How to Disable Scroll-Locking Hard Sell Web Popups

Chris Hayes
4 min readFeb 11, 2021

Often you land on websites that force you to make some action before viewing the page content. This is called a “hard sell”. Here’s how to quickly disable most hard sells.

An example of a hard sell popup on Glassdoor.

Caveats

  • This only works for pages that still show the page content. This wouldn’t work on a subscription paywall, for example The New York Times. Those sites never send you the whole article until you’ve subscribed.
  • You have to do this every time you refresh the page. There are ways to make this more permanent with Adblock/uBlock and scripts, but that’s for another blog post.

Delete the HTML popup

  1. Use the browser tools inspector (Ctrl+Shift+C or Cmd+Alt+C) to find the popup element by clicking anywhere on the page.
Usually the inspector button can be found at the top-left of the browser dev tools window.

2. This will highlight an HTML element.

After clicking anywhere on the page with the inspector, now an HTML element is highlighted.

3. Now press “Delete” on your keyboard to delete that HTML element.

The selected element was deleted, but I still can’t click on anything. Please note I’ve purposely blurred the page for privacy reasons.

4. Sometimes that may be enough, but often that will only delete an element inside the popup rather than the whole popup. You’ll know this if you still see a popup or you can’t interact with the page. To fix that, press delete again to delete the parent element.

5. Repeat step 4 until you can interact with the page. (If you hover links and buttons, does you mouse change?) If you delete too many elements, you can always use Ctrl+Z or Cmd+Z to undo your deletes.

Fix Scrolling

You can now interact with the page, but you can’t scroll. This is because the page height was set to the height of the screen with everything below “hidden”. You can double-check this is the case by looking for the right-side scrollbar. If the scrollbar should be there, but it’s missing, then the page height is being cutoff.

Where did the scrollbar go?
  1. Go back to the browser dev tools and make sure the “Inspector” tab is open.
The inspector tab shows lets you look at the web page’s HTML elements.

2. At the very top, click on the <body> tag.

Notice how the right-side shows styles for the selected <body> element. Btw, this is Firefox. If you don’t have dark theme enabled, or you’re on another browser you’ll see something slightly different. This is okay, all browsers use very similar inspector dev tools.

3. At the top of the right sidebar look for a “height” or a “max-height” property, and an “overflow” property.

Notice how height is set to “100vh” (the screen height) and overflow is “hidden”.

3. Disable both of these properties by clicking on the checkboxes to the left of the properties.

By de-selecting these checkboxes you are disabling these styles.

4. You should now see the scrollbar on the right side of the webpage. If you cannot find these properties, try clicking on the <HTML> element.

The scrollbar is back!

IF you can scroll up and down the page, you are done! Have a nice day.

IF you still cannot scroll, then it means the website is purposely trying to make this hard to circumvent. Keep reading to find how to fix that too.

Fix Scrolling — Extended

If you see the scrollbar, but cannot scroll, it means the web developer purposefully disabled scrolling on the page. All they did was write code to “go to the top of the page” when you try to scroll. Luckily, this can be easily disabled.

  1. In the browser dev tools, click on the “Console” tab.
Now looking at the “Console” tab in dev tools. You can run Javascript from here.

2. You’ll want to disable all “on scroll” events by pasting the code below into the input field at the bottom of that tab. Hit Enter to run the code.

document.body.onscroll = null;

(If you’re justly worried about running arbitrary code, this code came from here)

Paste + hit Enter to run the Javascript that disables all “onscroll” code.

3. You should now be able to scroll again. If that does not work you can try one of the different iterations below. If nothing works, add a comment with a link to a page where this doesn’t work. I’ll try to update this guide accordingly.

document.body.onwheel = null;document.onscroll = null;document.onwheel = null;

--

--

Chris Hayes

Software engineer. I build websites and apps. I love learning, tech, drawing, F1, and SpaceX. I value honesty, transparency, empathy and compassion.