Scroll DIV which contains image, not Document
I have a large image within a div which i want to scroll. But instead of the div scrolling, i have the document scrolling.
How can i get the image to scroll within the DIV and NOT the parent or document?
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Force Scroll</title>
<style type="text/css">
.scrollable
{
overflow: auto;
}
</style>
</head>
<body>
<div class="scrollable">
<img src="image.jpg" alt="test image" />
</div&开发者_开发知识库gt;
</body>
</html>
Set a (max) width and height for the div and it should work. Otherwise the div will just adjust itself to the size of the image:
#mydiv {
overflow: auto;
max-width: 800px; // or width instead of max-width
max-height: 600px; // or height instead of max-height
}
Example here: http://jsfiddle.net/x58RD/.
If it happens that you are forced to support ancient browsers like IE6, you need to use width and height instead of max-width and max-height anyways or it still won't work.
You need to define a width and height. Divs are block elements and will take up as much space as needed. In this case as large as the image is.
you need to fix size of div, for example:
width: 200px;
height: 200px;
加载中,请稍侯......
精彩评论