Is there a way to enable horizontal scrolling exclusively for a row of images, displaying overflow, without affecting the horizontal scrolling of the rest of the page?

Question

Is there a way to enable horizontal scrolling exclusively for a row of images, displaying overflow, without affecting the horizontal scrolling of the rest of the page?

I am working on a page layout where the body is 960px wide and I want to have a row of images overflow out of the right side of the page, with the ability to horizontally scroll to see the rest of the images. The challenge I'm facing is getting the overflowed images to display without increasing the width of the entire page and causing it to scroll horizontally.

My CSS setup:

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

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

My HTML structure (simplified):

<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>

This is the desired layout:

html css scroll overflow

Answer 1

Answer №1

If you're looking for a solution, this might be what you need (check it out on JSFiddle):

<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 {
  /* Set the width of your document */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* Adjust width as needed */
  width: 1500px;
}

This approach hides the overflow of the body, preventing horizontal scrollbars even if the page isn't wide enough. It then enables scrollbars on the container div with a set width (likely the document width), making the content inside that div as wide as desired.

An alternate implementation, setting the width of the section instead of the body, can be seen here.

Answer 2

If you're looking for a solution, this might be what you need (check it out on JSFiddle):

<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 {
  /* Set the width of your document */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow: scroll;
}
.pic-container {
 /* Adjust width as needed */
  width: 1500px;
}

This approach hides the overflow of the body, preventing horizontal scrollbars even if the page isn't wide enough. It then enables scrollbars on the container div with a set width (likely the document width), making the content inside that div as wide as desired.

An alternate implementation, setting the width of the section instead of the body, can be seen here.

Answer 3

Answer №2

After struggling to find a solution using only HTML and CSS, I turned to JQuery for help. Surprisingly, the solution works flawlessly and gracefully degrades in the absence of JavaScript. Even without JavaScript, the images remain scrollable, but they just don't extend beyond the right margin (the '.pic-container' div is initially width-less until JavaScript assigns it).

// Adjust pic-container width
function adjustPicWidth() {
  let windowSize = $(document).width();
  let newWidth = String(Math.round(((windowSize - 960) / 2) + 960));

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

Answer 4

After struggling to find a solution using only HTML and CSS, I turned to JQuery for help. Surprisingly, the solution works flawlessly and gracefully degrades in the absence of JavaScript. Even without JavaScript, the images remain scrollable, but they just don't extend beyond the right margin (the '.pic-container' div is initially width-less until JavaScript assigns it).

// Adjust pic-container width
function adjustPicWidth() {
  let windowSize = $(document).width();
  let newWidth = String(Math.round(((windowSize - 960) / 2) + 960));

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

Is there a way to enable horizontal scrolling exclusively for a row of images, displaying overflow, without affecting the horizontal scrolling of the rest of the page?

Answer №1

Answer №2

Similar questions

The picture won't stay within the confines of the container

How to extract hover CSS property from a Selenium WebElement using XPath in Python

Creating a shadow effect within a CSS mask: A simple guide

Linking two div elements together with a circular connector at the termination point of the line

Is it possible to launch an Electron application by clicking a run button in the VSCode

Displaying elements in a Django app using React JS is limited to rendering on a single HTML page within the app's DOM

Optimal method for showcasing a multitude of columns on an HTML page

Updating the database with PHP and MYSQL to display a zero value in a specific field

Painting Magic: Exploring the World of Canvas Zoom and Moves

Responsive design with Semantic UI

What are the steps to incorporate an iframe containing uniquely designed XML content?

Make sure to blur an editable p element using only vanilla JavaScript

Personalize Autocomplete CSS based on the TextField input in React Material UI when a value is present

@media query not functioning properly with certain rules

Fluid Cursor Movement in the Atom Text Editor

Update the contents of a different element upon hover using dynamic PHP functionality

Webkit feature: Rounded border image overlay

Create a scrollable div using the flex-grow-1 class in Bootstrap 5

How can you enhance the visibility of AngularJS Materials dropdown menus?

Creating manageable CSS styles for a wide variety of themes