How to Scroll Horizontally in Javascript

Save

The National Institute on Aging recommends designing Web pages that do not require horizontal scrolling. When a Web page's content spills over to hidden areas to the right of the viewing area, Browsers display horizontal scrollbars. Users must use these scrollbars to view the hidden content. If your Web pages require horizontal scrolling, you can use JavaScript to create your own horizontal scrolling function.

  • Launch your HTML editor or Notepad.

  • Open a Web page that requires horizontal scrolling. Choose a page whose horizontal content does not fit within the viewing area. Such a page requires a user to scroll to the right to view the additional content.

  • Paste the code shown below into your document's body section:

    <input type="button" value="Scroll Right" onclick="return scrollWindow(100)" />

    <input type="button" value="Scroll Left" onclick="return scrollWindow(-100)" />

    This creates two buttons you can use to test horizontal scrolling. The first button passes a value of 100 to a JavaScript function named "scrollWindow." The second button passes -100 to the function.

  • Paste the following "scrollWindow function into your document's head section:

    <script type="text/javascript">

    function scrollWindow(scrollValue) {

    window.scrollBy(scrollValue, 0);

    }

    </script>

    The window.scrollBy method causes the browser to scroll by the vertical and horizontal values specified in the parameter list. The first parameter, scrollValue, equals the value passed to the function. That will be 100 or -100 depending on the button clicked. These values are in pixels. The second value, 0, tells the browser to perform no vertical scrolling.

  • Save the document and open it in your browser. Click the button named "Scroll Right." The page scrolls to the right by the amount specified in the code. Click the "Scroll Left" button. The page scrolls to the left by the amount specified in the code.

Tips & Warnings

  • The buttons in this example pass values of 100 and -100. Choose any values you like when calling the scrollWindow function. Smaller values, such as 20 and -20, cause the browser to move in smaller increments when users click the buttons.
  • When designing your Web pages, view them at various screen resolutions before putting them on your website. This may help you discover pages that are too wide to fit on screens that use smaller resolution values.

References

  • Photo Credit BananaStock/BananaStock/Getty Images
Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!