How to Make a Tumblr Theme Unscrollable

Person using smartphone and laptop computer.jpg

Sometimes a gimmick works; in 2012 author J.K. Rowling introduced a side-scrolling website that came off as classy rather than hackneyed. If you want to disable scrolling in one or both directions on your blog, you can do so by adding a few words to your blog's stylesheet. If your goal is to remove the scrollbars on the page while still allowing users to scroll with their mouse or keyboard, the effect is more complex and requires more coding.

1 Disabling Scrolling in One Direction

If you want to create a layout that only moves in one direction -- such as with a side-scrolling website -- you can set the body of your page to move that direction while hiding everything in the other. For this to work on Tumblr, you will likely need to create your own side-scrolling theme. To disable vertical scrolling and enable side-scrolling, you would add the following to the body section of your style sheet:

overflow-x: scroll; overflow-y: hidden;

The "x" and "y" refer to the axes. If you want to reverse the effect to enable vertical scrolling and disable horizontal scrolling, swap the "x" and the "y."

2 Disabling Scrolling in CSS

To stop users from scrolling in either direction on your Tumblr blog, you only add one overflow attribute to the <body> section of your stylesheet. By adding "overflow:hidden;" to the <body> section, you tell the browser to hide everything beyond the boundaries of the screen. The scrollbars will not be present, and visitors cannot scroll using their mouse wheel or with the arrow keys.

3 Hiding Scrollbars

CSS alone can't modify or remove the scrollbar without disabling scrolling. For this effect you'll need to use jQuery and a plugin for managing the scrollbar on your page. These plugins include Scrollbar Visibility with jScrollPane and Tiny Scrollbar. Google offers a hosted version of jQuery that you can add to your Tumblr blog, so that you don't have to host it on your own Web space. (Links in Resources.) Doing this requires a fair amount of coding and experimentation on your part, so go into the project ready to learn about styling jQuery and CSS.

4 Usability

While disabling all scrolling on your Tumblr blog is a cute trick, it's not terribly usable unless you only have one or two posts and use Tumblr as a specific sort of landing page. With side-scrolling, go cautiously; while it may work on a photography blog, it could be unusable on a text blog. Bear in mind that disabling scrolling on your blog can hinder users with small screen resolutions, such as on netbooks, if your content exceeds the size of their screen. It also may not work for users who don't have their browser at full screen, such as those who multitask.

Ashley Poland has been writing since 2009. She has worked with local online businesses, supplying print and web content, and pursues an active interest in the computer, technology and gaming industries. In addition to content writing, Poland is also a fiction writer. She studied creative writing at Kansas State University.