I am making a slideshow in a part of a site. I have all the images lined up horizontally, therefore their container div is wider than the page. This causes the page to scroll horizontally. My question is how can I prevent the page from being able to scroll to the right to see the rest of the images? I tried making the body overflow-x:hidden which seemed to fix the problem, but only removed the scroll bar and still allowed the user to scroll with the mousepad.

Hopefully i explained my problem well enough. If not i will elaborate more. Thanks so much!

1 answer

Ktash 1851

Instead of putting the overflow:hidden; on the body element, if you put it on the element that is larger than the page, they shouldn't be able to scroll. The main issue for this is if you wanted to have the images trail off to the right and have the user see them. You can solve that by making it the width of the entire page, and from there center the images within the div (of which there are a few strategies, but it's not necessarily easy, especially not with a slideshow or with images that aren't all the same size).

And you're question was very clear. Thank you :)

Answered almost 8 years ago by Ktash
  • Clear questions are nice. I wish there was a way I could up-vote a question as well as an answer. +1 Abinadi Ayerdis almost 8 years ago
  • thanks for your input. just one note, I dont want the user to be able to scroll to the right. I want them only to be able to see the image that is centered on the page. they will have to click the image to the right to move the slideshow forward. the only solution I could think of was making a div that is outside the main container, that spans across the entire window, then make that display:hidden. only problem with that is the site is developed in wordpress and i can only put content for that page inside the main container. Stephen Cronin almost 8 years ago