Tips on utilizing browser scroll for horizontal overflow of internal div?

Question

Tips on utilizing browser scroll for horizontal overflow of internal div?

I'm working on creating a dynamic page with a tree-like structure that easily exceeds the width of the browser window. My goal is to enable horizontal scrolling for the entire page using the browser's scrollbar, without needing a separate scrollbar specifically for the tree. The relevant CSS properties are as follows:

body{
overflow-x:auto;
background-color: #ffffff;}

#campaign {
width: 100%;
overflow: auto;
white-space: nowrap;}

Here is a screenshot showing my current output.

Output

Notice that the bottom horizontal scrollbar disappears when you scroll vertically up.

Thank you.

javascript html css

Answer 1

Answer №1

If you set the overflow property to visible in the container div, it will extend beyond the 100% width limits and add a scrollbar to the body.

Check out this simplified example: https://jsbin.com/bejimit/edit?html,css,output

Here is the CSS code for reference:

body {
  overflow-x: auto;
}

#campaign {
  display: inline-block;
  width: 100%;
  overflow: visible;
  white-space: nowrap;
}
.content-item {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

Answer 2

If you set the overflow property to visible in the container div, it will extend beyond the 100% width limits and add a scrollbar to the body.

Check out this simplified example: https://jsbin.com/bejimit/edit?html,css,output

Here is the CSS code for reference:

body {
  overflow-x: auto;
}

#campaign {
  display: inline-block;
  width: 100%;
  overflow: visible;
  white-space: nowrap;
}
.content-item {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

Tips on utilizing browser scroll for horizontal overflow of internal div?

Answer №1

Similar questions

What is the most effective method for pausing execution until a variable is assigned a value?

Is the combination of elements by CSS Minifiers harmful?

Effortlessly glide to the top of the webpage

JavaScript class name modifications are not functioning as expected

What are the steps for creating a simple .htaccess file to add password protection to a website?

Activate the button solely when the text field has been populated without any spaces

The h3 element is not responding to the adjacent sibling selector

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

CSS - Nesting classes within one another

Dynamic tooltips with jQuery: enhancing user experience through mouseover and

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Getting rid of unnecessary compiled CSS files in Compass

Connecting a custom bootstrap stylesheet to WordPress

Transforming JSON arrays into object representations

Is it possible to ensure only one value is set as true in useReducer without manually setting the rest to false

How to resize and center an image within a div element as they both scale proportionally

Utilizing the CSS grid framework to efficiently create repetitive rows and columns in code

Filter the array and determine the number of elements in the filtered array

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Filter products by pressing the "Enter" key while using the search input in