dynamic scrolling of an oversized DIV
dynamic scrolling of an oversized DIV
int scrollLeft, scrollTop
The number of pixels that have scrolled off the left edge of the element or off the top edge of the element. These properties are useful only for elements with scrollbars, such as elements with the CSS overflow attribute set to auto. These properties are also defined on the <body> or <html> tag of the document (this is browser-dependent) and specify the amount of scrolling for the document as a whole. Note that these properties do not specify the amount of scrolling in an <iframe> tag. These are non-standard but well-supported properties.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>simple scroller</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="scroller_container" style="width:300px;border:2px solid #ccc;">
<div id="contents" style="height:100px; width:500px; overflow:auto;">
<img alt="image" src="myimage.gif" height="20" width="800" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla at augue quis wisi tempus tempor. Praesent in neque.
Aliquam rhoncus sapien a erat. Nunc venenatis sem ut ligula.
Vivamus tellus arcu, sollicitudin sit amet, rhoncus ut, viverra ut, lectus.
Donec dolor urna, ultricies nec, porttitor et, cursus sed, dui.
Curabitur turpis mi, ornare non, euismod id, volutpat quis, lorem.</p>
<p>Mauris egestas neque in mauris. Cras vitae massa eget augue eleifend tincidunt.
Nulla et leo ac erat mattis viverra. Nulla tincidunt eros eget massa. Maecenas et neque.
Quisque interdum. Mauris lacinia wisi sit amet eros. Maecenas sodales.
Pellentesque non justo sed enim scelerisque vestibulum. Sed fringilla commodo justo.
Integer justo. Phasellus nec odio nec ante posuere fringilla.
Sed adipiscing, lectus non euismod consequat, orci augue ornare velit, quis gravida velit massa quis leo.</p>
Text <a href="http://www.lipsum.com/">Lorem Ipsum</a>
</div>
</div>
<p>
<button type="button" onclick="document.getElementById('contents').scrollTop-=20;">↑</button>
<button type="button" onclick=" document.getElementById('contents').scrollTop+=20;">↓</button>
<button type="button" onclick="document.getElementById('contents').scrollLeft-=20;">←</button>
<button type="button" onclick="document.getElementById('contents').scrollLeft+=20;">→</button>
</p>
</body>
</html>
沒有留言:
張貼留言