Home/ Questions/Q 6081329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:09:47+00:00

I have a large image within a div which i want to scroll. But

  • 0

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>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0