/    Sign up×
Community /Pin to ProfileBookmark

div scrolling

Copy linkTweet thisAlerts:
Jul 22.2006

I have been informed that there is a div code I can use so that scrollbars to not appeary when content exceeds a certain window, it just scrolls. Can anyone please tell me what that code is? Thanks.

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@AlbatrossJul 22.2006 — You're thinking of a style rule (CSS).

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Preventing Overflowing Text with CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-size: 16px;
line-height: 1.2em;
}
div {
margin: 1em;
}
p {
padding: 0.25em 1em;
text-indent: 1.25em;
}
#noScrollDiv {
background-color: #999;
color: #FFF;
height: 150px;
width: 400px;
overflow: hidden;
}
#scrollDiv {
background-color: #999;
color: #FFF;
height: 150px;
width: 400px;
overflow: auto;
}
</style>
</head>
<body>
<div id="noScrollDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus.
</p>
<p>
Sed sed nunc vel dui malesuada congue. Nulla erat mauris, vestibulum vitae, laoreet sit amet, tempor vel, nibh. Integer viverra accumsan erat. Phasellus adipiscing. Praesent dignissim, ipsum vel rhoncus gravida, massa libero accumsan nunc, vitae lacinia urna elit ut odio. Quisque arcu nulla, scelerisque sit amet, adipiscing quis, tempus a, nisl. Duis tellus. Aliquam erat volutpat. Nulla aliquet scelerisque elit. Nullam tortor. Nunc ac ante.
</p>
<p>
Etiam in velit. Suspendisse pretium euismod pede. Aliquam erat volutpat. Sed eu risus quis nunc suscipit ultricies. Maecenas quis wisi. Nam aliquam metus et enim. Donec egestas imperdiet nunc. Aenean arcu lectus, euismod ut, hendrerit sit amet, fringilla ut, erat. Proin posuere. Aenean tellus quam, egestas in, rhoncus hendrerit, convallis quis, dolor. Duis laoreet, nibh ac cursus hendrerit, libero nunc bibendum velit, et vestibulum sem lacus sit amet elit. Duis ac massa.
</p>
<p>
Aenean mattis laoreet dui. Quisque quis eros. Nullam magna lectus, tempus at, sagittis suscipit, accumsan eu, pede. Sed venenatis placerat neque. Fusce sodales sem id dolor. Maecenas eleifend volutpat enim. Quisque nibh risus, viverra et, placerat ac, bibendum id, urna. Proin volutpat tincidunt enim. Nulla iaculis. Integer at eros in pede volutpat lobortis. Fusce massa lacus, placerat id, porta id, tempus in, tortor. Curabitur sagittis. Morbi a tortor sit amet mauris nonummy sagittis. Donec leo.
</p>
</div>
<div id="scrollDiv">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec dolor. Curabitur enim quam, dignissim vel, blandit sed, mattis a, leo. Donec ullamcorper. Sed porttitor magna sit amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis, egestas id, neque. Integer at nulla. Nam fringilla mi ac augue commodo ornare. Donec ornare, dui vitae convallis congue, augue dui blandit sapien, in faucibus mauris massa consectetuer purus.
</p>
<p>
Sed sed nunc vel dui malesuada congue. Nulla erat mauris, vestibulum vitae, laoreet sit amet, tempor vel, nibh. Integer viverra accumsan erat. Phasellus adipiscing. Praesent dignissim, ipsum vel rhoncus gravida, massa libero accumsan nunc, vitae lacinia urna elit ut odio. Quisque arcu nulla, scelerisque sit amet, adipiscing quis, tempus a, nisl. Duis tellus. Aliquam erat volutpat. Nulla aliquet scelerisque elit. Nullam tortor. Nunc ac ante.
</p>
<p>
Etiam in velit. Suspendisse pretium euismod pede. Aliquam erat volutpat. Sed eu risus quis nunc suscipit ultricies. Maecenas quis wisi. Nam aliquam metus et enim. Donec egestas imperdiet nunc. Aenean arcu lectus, euismod ut, hendrerit sit amet, fringilla ut, erat. Proin posuere. Aenean tellus quam, egestas in, rhoncus hendrerit, convallis quis, dolor. Duis laoreet, nibh ac cursus hendrerit, libero nunc bibendum velit, et vestibulum sem lacus sit amet elit. Duis ac massa.
</p>
<p>
Aenean mattis laoreet dui. Quisque quis eros. Nullam magna lectus, tempus at, sagittis suscipit, accumsan eu, pede. Sed venenatis placerat neque. Fusce sodales sem id dolor. Maecenas eleifend volutpat enim. Quisque nibh risus, viverra et, placerat ac, bibendum id, urna. Proin volutpat tincidunt enim. Nulla iaculis. Integer at eros in pede volutpat lobortis. Fusce massa lacus, placerat id, porta id, tempus in, tortor. Curabitur sagittis. Morbi a tortor sit amet mauris nonummy sagittis. Donec leo.
</p>
</div>
</body>
</html>
[/code]
Copy/paste the example code into an editor and save it. You'll notice the [b]overflow: hidden;[/b] declaration in the first <div> prevents the scrollbar from appearing. [b]overflow:auto;[/b] declaration in the second <div> allows for the scrollbar on the right side.

Setting an element (in this case the <div> container) with [b]overflow: scroll;[/b] will cause both a horizontal and vertical scrollbar to appear.

Edit: You mean automatically scrolling when the page loads? That's JavaScript at work, and I have just the script for you ?.

http://onlinetools.org/tools/domnews/ (please pardon the language, the site owner--obviously someone else--has a weird sense of humor in my opinion)
Copy linkTweet thisAlerts:
@bmassauthorJul 22.2006 — Okay, I did that, but it just doesn't scroll at all... http://www.vvclans.com/db/test.php

Only the bottom one scrolls, not the one with the noScrollDiv.
Copy linkTweet thisAlerts:
@AlbatrossJul 22.2006 — Of course the top one won't scroll. That's [b]overflow: hidden;[/b] at work. That will prevent the scrollbar from appearing.
Copy linkTweet thisAlerts:
@bmassauthorJul 22.2006 — But I am looking for something that will prevent the scrollbar from appearing but still allow me to scroll ?

Them: "Yes they! ?. With divs you have no need of scrollbars"

me: "and what do you mean no need for scrollbars?"

Them: "with divs you can just scroll..."

Is this possible?
Copy linkTweet thisAlerts:
@cridleyJul 22.2006 — how do you intend to scroll? by clicking something on the page like a scroll up/down button/img ? you'll need javascript to do that, by moving the div up/down when you want to scroll..
Copy linkTweet thisAlerts:
@pacerierAug 05.2006 — you can first set the overflow to hidden so that there is no scrollbar. then you can create two images called up.gif and down.gif and when onclick you modify the div such that you take out some of the stuff from the gif when the down arrow is clicked and add some stuff back when the up arrow is clicked.
×

Success!

Help @bmass spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...