Geek Answers Handbook

How to scroll a large image inside a smaller div using mouse and drag?

I want to place a large image inside a div and allow the user to scroll the image with the mouse (click and drag in the desired direction). How can this effect be achieved?

CSS

#image{
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    top: 300px;
    background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}

HTML:

<div id="image"></div>

EDIT:
I want to implement this on my own in order to gain knowledge, a third-party framework is the last resort.

+4
source share
3 answers
<html>
    <body>
        <div style="width:200;height:200;overflow:scroll;">
            <img src="/home/james/Pictures/scone_ontology.png" />
        </div>
    </body>
</html>
+1
source

Check out jQuery UI Draggable. The first example sounds exactly like what you are trying to do: https://jqueryui.com/draggable/

0
source

, 600w 400h div, "" , ? .

You have a div with the size that you want the final product to do. Make sure you install it css in overflow:scroll;. Then put your image inside this div. Your image may also be a background image of a div.

What is it.

A cool trick would be to wrap it all up in a div, which is a little smaller with overflow:hidden. Small enough to hide the ugly scrollbars. But it can be poor usability.

-1
source

More articles:


All Articles