Flix: Creating a Scrollable Area

Topics covered in this Mobile & Responsive Web Design tutorial:

Creating a horizontal scrollable area, Optimizing the scrolling for iOS touch devices

Exercise Preview

Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135.

Exercise Overview

In this exercise you’ll learn how to make one section of a page scrollable. You’ll even optimize it to add the “native” scroll bounce people expect on iOS devices.

Styling the Horizontal Scroll Area

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.

2. In a desktop browser, preview index.html from the Flix Scrollable Area folder in Class Files > yourname-Mobile and Responsive Class.

   Notice the movie posters are currently stacked on top of each other. Our design calls for the movie posters to be on a single scrollable line. On smaller devices, we want users to be able to scroll from left to right if all the movie posters don’t fit on-screen. First let’s get the movie posters in a single line.

3. On the Desktop, navigate to the Flix Scrollable Area folder.
4. Go into the css folder and open main.css in a code editor.
5. The movie posters are in an unordered list that has a movies class applied to it. On line 83 find the .movies li rule. This targets the list items in our movies unordered list and sets their size and spacing.

6. Add the following bold code to get all the movie posters on one line:

   .movies li {
       display: inline-block;
       width: 99px;
       margin-right: 11px;
   }
   

7. Save the file.
8. Preview index.html in a browser. The posters are now on the same line, but make the browser window narrow and notice that the movie posters wrap to a second line. On smaller devices we want to prevent this behavior.
9. Switch back to main.css in your code editor.

10. Directly above the .movies li rule, find the .movies rule (line 78). This targets our movies list. Add the following bold code:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
    }
    

11. Save the file.

12. Preview index.html in a browser and:

    • Make the browser window narrow so you can see that the movie posters no longer wrap to a second line.

    • There’s a new problem though. Now that the posters don’t fit, scroll the page to the right to see it looks weird because the posters are wider than everything else. The problem is the whole page gets scrolled, but we only want the posters section to scroll.

13. Switch back to main.css in your code editor.

14. Add the following bold code to the .movies rule:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
       overflow-x: auto;
    }
    

    NOTE: overflow-x refers to the x-axis (which is horizontal scrolling). The auto value will only add scrollbars if they are needed.

15. Save the file.
16. Preview index.html in a browser to see that only the poster area scrolls now. This works on desktop browsers, which typically show a scrollbar. Mobile browsers typically will not show a scrollbar. On touch devices, users swipe over the area to scroll it!

17. If possible, preview index.html in iOS Simulator or on an iOS device. In iOS Simulator, drag over the posters to simulate a swipe. When you hit the end of the scrollable content, notice that it abruptly stops scrolling. It doesn’t do the “native” bounce back that iOS apps typically do. Luckily there’s an easy fix.

    NOTE: If you’re using iOS Simulator and it seems to “click” when you release the mouse after dragging, don’t worry. It’s just a bug in the simulator and won’t happen on actual devices.

18. Switch back to main.css in your code editor.

19. Add the following bold code to the .movies rule:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
    }
    

20. Save the file.

21. If possible, return to the iOS Simulator or an iOS device and reload index.html. Now when you drag/swipe over the posters, it will give a native bounce back when it hits the end of the scrollable area. This is how native iOS apps behave and it’s nice we can have our webpages do the same!

    Visually Indicating Scrolling

    We purposely designed the size of the posters so that the right-most poster will be partially cut off (on most devices). That implies there is more for the user to scroll and see. In your designs, if you think cutting something off doesn’t imply scrolling well enough, consider adding a visual indicator or instructions below the scrollable area.

Optional Bonus: Removing Extra Margin

Each movie poster has 11px of margin on the right. That creates the space between the movie posters. It also adds extra space on the far right, because there is already padding all around the movies section. We can remove that unwanted space with one CSS rule.

1. Switch back to main.css in your code editor.
2. Find the .movies li rule (around line 86).

3. Below the .movies li rule add the following new rule:

   .movies li:last-child {
      margin-right: 0;
   }
   

4. Save the file.
5. Preview index.html in a browser.

6. Scroll to the far right of the posters, and notice the margin to the right of the last poster now matches the margins between all the other posters.