What are Unscrollables?
Unscrollables is what I call all those menus, messages, and pop-ups that stay on a webpage even when you scroll. They are like internet flies – you try to move, to get rid of them, but they persistently stay.
How to recognize Unscrollables
- They stay on screen even when you scroll
- Usually, they like to stick to the (window) walls: they may stick to one side, or stretch on the top or bottom.
- They have no CLOSE or X button to remove them.
- They tend to be loud, trying to get your attention.
- They take up valuable screen-real-estate.
- They don’t mind hiding real content (and I suspect even secretly enjoy it).
- If you dare zoom in for larger text, they leave you smaller and smaller reading space.
- They love collecting email addresses.
Examples
- A horizontal strip down the bottom of the page. Promotion, subscribe or further reading prompt.
- A pop-up with a smiling customer-service person offering help or online chat.
- A colorful rectangle with all sorts of social media icons and numbers.
- A fixed menu on the top of the page (which is at least helpful).
- Any sort of advertisement that jumps at you from the side. And stays.
- A cluttered sidebar which adds noise and disturbs you from focusing on what you want to read.
Unscrollables are quite trendy right now, and there are all sorts of creative uses for them. I would guess only the smart uses will survive but most won’t last, as they do often interfere with reading the actual content. I well remember days, long ago, when FRAMES were all the rage – finding yourself in a nightmare of 3 or 4 different scrollbars on a page was an everyday matter. Ok, enough ranting, what’s the solution?
The Solution
Inspect Element > Display: none;
The browser’s INSPECT tool to the rescue!!
You may already know and use it, if not, basically every browser has a built-in tool to inspect websites’ code. To open it, you point at something in the webpage, right click and select Inspect element:
- Inspect Element – on Firefox, IE, Opera
- Inspect – on Chrome
- On Safari you need to enable it first. Ask Google how.
A few words on how web pages are constructed
Websites are built out of elements nestled inside one another like Matrioshka dolls.
Example
Let’s say I want to hide that gray strip at the bottom of the Google search page. Follow the screenshots below.
So we right-clicked, selected Inspect Element, and this window opened up in the bottom. The element I clicked on is highlighted, both on the webpage and in the code. You can see the Matrioshka/telescope structure of the code – the inner-most elements furthest to the right are the really-tiny dolls. If you hover over the lines in the main pane which opened, you will see the browser highlight the equivalent element in the website.
The “hardest” part is understanding which code line is the biggest Matrioshka you need to select. Usually, if you point your mouse at the background of the Unscrollable, it could be the right one, or you may need to go up a few lines till you get the main container you need.
Once you stand on the right line of code, look over to the right, for the Rules tab, open by default.
There you will see:
element {
}
Clicking on the word element, or on the curly brackets gives you the option to add your own code. All you need to do, is write between the curly brackets:
display: none;
You can close the inspector using the X on its top-right corner.
Voila! the Unscrollable is hidden!
If you’re not sure which is the right Matrioshka, you can simply give it a try, on different elements. You can’t do any harm – you can always refresh the page to get it back to its usual state. Using this method, you can hide anything you want, on any website.
If you’ve enjoyed this, I encourage you to explore what else you can do with the Inspect tool – it’s extremely powerful and useful!
Happy surfing! :-)