-1

I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix. 

<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
 }

 </style>

Which disables scrolling all together.

McMonty
  • 85
  • 1
  • 9

2 Answers2

1

What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.

First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)

So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:

max-width: 100%;

Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/

If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.

Pevara
  • 14,242
  • 1
  • 34
  • 47
0
<style type="text/css">
body {
min-width: 96px;
max-height:  200%;
overflow-x: hidden;
background-color: #FF0; /**/
 }

</style>

try this put some content in it

Harshit Sethi
  • 559
  • 1
  • 5
  • 22
  • thank you for the post but can you possibly update it so that the page will only scroll vertically and not horizontally at all? I added this block and the page stills scrolls both ways for some reason...? – McMonty Aug 22 '15 at 12:32