disable vertical scrolling on a div/img

I have a header on my website with a large image ( 1000px width ). This image is centered (horizontally). If a user comes to this website with a browser window which is slimmer than 1000px in width, he can scroll horizontally. This is what I would like to prevent, since the outer parts of the image are not important and the rest of the page is as wide as the users browser window.

For instance: A users browser window is 600px in width, what I would like to happen is:

The first 200px of the image are invisible, the next 600px are visible and the last 200px of the image are invisible again.

<html>
<body>
    <div id="outer" style="width:100%;overflow-x:hidden;">  
        <div id="inner" style="display: table;margin: 0 auto;width:1300px">
            <img src="image.jpg" alt="image" width="1300px">
        </div>
    </div>
</body>
</html>

user1

You will need to use CSS for that.

div {
    overflow-x: hidden;
}

Should work by itself if you just set it as a background image, centered. You'll need to put it on a div that has 100% width applied to it, and a height specified in order to expand the div to see anything.

Try position: fixed; This fixes the position and doesn't allow any scrolling

You need to make the image a background of it's containing div.

<html>
<body>
    <div id="outer"
         style="width:100%; overflow-x:hidden;">  
        <div id="inner"
             style="margin: 0 auto;
                    width:100%, 
                    background: url('image.jpg') 50% 0; 
                    max-width: 1300px;">
        </div>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/18770450/disable-vertical-scrolling-on-a-div-img

标签

css

html

browser

horizontal-scrolling