How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?

Question

I have a page with a body that's 960px wide and I have a row of images that I want to overflow out of the right side of the page, and allow for the display of the overflowed images and horizontally scrolling. I don't want the page as a whole to horizontally scroll, just that element.

It's relatively easy to get the horizontal scrolling to work, but I can't get the overflow images to show without also increasing the width of the entire page (and, hence, making the page horizontally scroll).

My CSS:

container{
  width:960px;
  margin: 0 auto;
  }

.pic-container {
  white-space:nowrap; 
  overflow:scroll;
  }

My (simplified) HTML:

<body>
<container>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</container>
</body>

Here's a little diagram of what I'm looking for:

enter image description here

Are you willing to use javascript? There are many many plugins out there that do this exact thing and it looks a little nicer without the scrollbar. — Jared, Oct 30 '12 at 20:19
Here's one `Jquery` solution [that might do what you want](http://css-tricks.com/examples/MovingBoxes/#&slider1=1). [And here's another](http://jqueryfordesigners.com/demo/slider-gallery.html). But it sounds like you want the bounding box of the images to expand indefinitely, with a little scrollbar that slides the contents of it around...so neither of these will qualify, I think. — jamesplease, Oct 30 '12 at 22:05
Totally willing to use javascript, but unfortunately jmeas, neither one of these are what I'm looking for. — Matt Martin, Oct 30 '12 at 22:49
Maybe I'll just have to query the window size and change the width of the pic-row div to match it. But that does seem pretty inefficient... — Matt Martin, Oct 30 '12 at 22:50

jamesplease · Answer 1 · 2012-10-30T20:32:49.813

3

This might do what you're looking for (see on JSFiddle here):

<section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>

CSS:

body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}

What we do is hide the overflow of the body, which prevents the horizontal scrollbars, even if the page isn't wide enough to show everything. Then you make it show the scrollbars on the container div, with a set width (presumably, the width of your document) and make the content within that div as wide as you want.

Another implementation, which just sets the width of the section instead of the body, can be viewed here.

edited Oct 30 '12 at 20:32

answered Oct 30 '12 at 20:20

jamesplease

12,547
6
47
73

Close, but your solution only gets me as far as what I already had. That is, the overflow images are still not visible outside width of the container. I want the overflow images to be visible without messing with the width of the page. Does that make any sense? – Matt Martin Oct 30 '12 at 20:48
hmmm...maybe. Do you want scrolling? If you make the overflow images visible outside the width of the container, then this seems incompatible with having a scrollbar to let you see them all. – jamesplease Oct 30 '12 at 20:55
Or is it that you're looking for the position of the images, which are all always visible, to scroll left and right? – jamesplease Oct 30 '12 at 21:06
Second one. It's essentially a preview of what's going to come into the viewport... kind of. I wish I could find a good example online somewhere; I know I've seen it before. Using jquery is also no problem, if need be. – Matt Martin Oct 30 '12 at 21:31
fun fact, this only worked for me when i removed the float:left on my images and displayed them as inline-block. – random-forest-cat Sep 24 '13 at 15:18

score 1 · Accepted Answer · answered Oct 30 '12 at 23:19

I couldn't figure out a way to do this with just html + css so I leaned on JQuery. This actually works perfectly, and it degrades nicely too — if there's no javascript, the images are still scrollable, they just don't bleed into the right margin (the '.pic-container' div by default has no width until the js adds it in).

// Update pic-container width
function picWidth() {
  win = $(document).width();
  width = String( Math.round(((win-960)/2) + 960) );

  $('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();

How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?

2 Answers2

Linked