Time for action — scrollable HTML

Follow these steps to set up a simple HTML page with a scrollable area:

  1. We'll start off with setting up a basic HTML page and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. We need to have an area of content that's large enough to scroll, so we'll add several paragraphs of text to the body of the HTML document:
    <!DOCTYPE html>
<html>
<head>
<title>Custom Scrollbars</title>
<link rel="stylesheet" href="styles/styles.css"/>
</head>
<body>
<h2>We don't want this box of content to get too long, so we'll make it scroll:</h2>
<p>Lorem ipsum dolor sit amet...
Include several paragraphs of lorem ipsum here
...mollis arcu tincidunt.</p>
<script src="scripts/jquery.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

    I have not included it all, but I have included five long paragraphs of lorem ipsum text on my page to add some length and give us something to scroll. In case you're not aware, lorem ipsum is simply dummy filler text. You can generate some random lorem ipsum text for yourself to fill your page at http://lipsum.com.

  2. Now, we need to make our text scroll. To do that, I'm going to wrap all those paragraphs of lorem ipsum in a div and then use CSS to set a height on the div and set the overflow to auto:
    <h2>We don't want this box of content to get too long, so we'll make it scroll:</h2>
<div id="scrolling">
<p>Lorem ipsum dolor sit amet...
Include several paragraphs of lorem ipsum here
...mollis arcu tincidunt.</p>
</div>
  3. Next, open your empty styles.css file, and add this bit of CSS to make our text area scrollable:
    #scrolling {
width:500px;
height:300px;
overflow:auto;
}

    Feel free to add some additional CSS to style your text any way you'd like.

    Now, when I view my page in a browser, I'll see that the browser has added some (ugly) scrollbars for my text:

    Time for action — scrollable HTML
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.175.182