Position image in scrolling div

HTML & CSS
1

I have a map image which is too large to display in full, but adding overflow:scroll to the containing div to allow people to access the rest seems like a reasonable solution. However, that displays the top left corner of the map, and the important information is in the lower right area.

Is there any way to position the image so that the correct area is visible initially? Or is there a better solution I’m failing to see?

2

It seems like a tricky one, unless you go for some kind of JS panning image viewer thing.
The only thing I can think of using pure html/css is to have the map in an iframe. Then the html doc that holds the map has an invisible div with an ID placed absolutely at a certain position over the map image.

        <figure>    <!--Relative Pos-->
            <img src="map.jpg">
            <div id="cent"></div>    <!--Absolute Pos-->
        </figure>

Then the iframe targets the map doc and the ID.

<iframe src="map.htm#cent">
1 Like
3

You could set the scroll position of the div with some JS.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#scroll {
	width:300px;
	height:300px;
	border:1px solid #000;
	overflow:auto
}
.map {
	width:500px;
	height:900px;
	background:red;
	position:relative;
}
.map span {/* just for testing */
	position:absolute;
	bottom:0
}
</style>
</head>

<body>
<div id="scroll">
  <div class="map"><span>Test</span></div>
</div>
<script>
var element = document.getElementById("scroll");
element.scrollTop = element.scrollHeight;
</script>
</body>
</html>
2 Likes
4

Thanks, @SamA74. (It’s nice to know I wasn’t overlooking something obvious. )

@PaulOB: thank you - I’ll try that.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.