How do I allow horizontal scrolling only for a row

2019-04-16 18:34发布

站内问答 / HTML/CSS
1504 2 6

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

2条回答
成全新的幸福
2楼-- · 2019-04-16 18:43

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();
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2019-04-16 18:52

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)