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.

javascripthtmlcss

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of the handleTextShow function in components>DrinkList.js is not working as expected after integrating an API

While working on my react program, I created a DrinkList.js file to display images of drinks. However, when I attempted to make the images clickable by adding an Onclick function to display their names in the console, errors started flooding in. import Rea ...

javascriptreactjs

Add a flexible element to a container without disrupting the alignment of the other

I'm facing a challenge in adding an action button to the end of a grid layout without affecting the centering of the items. The button should seamlessly fit into the grid, just slightly offset. If you check out my demo, you'll see what I mean. ...

htmlcssflexbox

Error encountered while attempting to download PDF file (blob) using JavaScript

Recently, I have been utilizing a method to download PDF files from the server using Laravel 8 (API Sanctum) and Vue 3. In my Vue component, I have implemented a function that allows for file downloads. const onDownloadDocument = (id) => { ...

javascriptvue.js

The functionality of loading JSON is not working properly in ePub3

Currently, I am working on a project involving the creation of an ePub3 eBook. One of the exciting features I have successfully integrated is three.js to showcase some models. My next goal is to develop 'hotspot' elements (small cubes that users ...

javascriptjsonthree.jsepub3

Bootstrap4 lacks responsiveness

html, body { background-color: #E3E3E3; width: 100%; height: 100%; margin: 0; padding: 0; } /* Custom Styling */ .section1 { background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed; -webkit-background-size: cover ...

htmlcssbootstrap-4

Using PHP to dynamically update image source upon clicking an upload button:

Is it possible to dynamically display a new image after uploading it using an ajax-upload script on a 'edit product' page for a shop products? On load, all thumbnails are fetched from the DB but when a user uploads a new file, I want the new imag ...

phpjavascriptajaxupload

Having trouble with CSS transitions not showing up correctly in Chrome. Any suggestions on how to resolve this issue?

While working on a static website, I attempted to apply a background-color transition to a button. Despite reviewing my code multiple times, I discovered that the issue was not with my coding. It seems like the browser is having trouble displaying CSS tran ...

cssgoogle-chromebrowsertransition

What is causing the gap to appear between the image and the div element underneath?

I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup: div, img, body { margin: 0; padding: 0; } #image { width: 100%; he ...

htmlcssimage

How is UI Router Extras causing unexpected errors in my unit tests?

QUESTION: - I am facing failures in my tests after installing ui-router-extras. How can I resolve this issue? - Is there a way to use ui-router-extras without causing test failures? If you want to quickly install this, use yeoman along with angular-full ...

javascriptangularjsunit-testingangular-ui-routerkarma-runner

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is there a way to dynamically add a rule to existing CSS using code, particularly in overrides? For example: var sheets = document.styleSheets; // Some code omitted for simplicity var sheet = sheets[sheets.length - 1]; sheet.insertRule('.overlay {flo ...

javascriptcssextjsextjs5

Is there a method to access the output of getStaticProps function from NextJS API routes?

Is there a method to compute and cache new data during build time that is essential for both the front-end and back-end API routes? I'm looking for a way to access the static properties generated by API routes at build time since the routes are access ...

javascriptreactjsapinext.jsvercel

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

htmlcss

Step-by-step guide on fetching blog posts from a Ghost blog by utilizing the API in a Vue cli project

I'm currently working on my Vue cli project and I am trying to showcase all the posts from a Ghost blog using the API. Unfortunately, the example provided on the page is for a nuxt project. Once we have called the dependencies and authenticated with ...

javascriptvue.jsvuejs2async-awaitvue-component

Transforming ajax code into node.js

After mastering ajax calls for client-server interaction, I am facing a challenge in converting my code to a server-side node compatible JS using http requests. Despite reading various tutorials, I am struggling to adapt them to fit with my current code st ...

javascriptjqueryajaxnode.js

Adding the classname "active" in ReactJS can be achieved by utilizing the `className` attribute within

I am facing an issue with adding the active classname in my code. Can anyone suggest a solution to add the active classname for this section: <li onClick = {() => onChangeStatus({status: 'on-hold'})} className = {appState === {'status& ...

javascriptreactjs

Discover how to obtain an access token using Yelp API V3 with JavaScript

Currently in the process of learning how to utilize this system, however there appears to be an issue with my code. $.ajax({ dataType: "POST", url: "https://api.yelp.com/oauth2/token", grant_type: "client_credentials", client_i ...

javascriptajaxapiyelp

A visible white line appears within the image when the Windows scaling is set to 125%

I encountered a peculiar issue. A certain website displays an image with a 5px solid border, but when I adjust the Windows scale settings to 125%, there is a noticeable gap between the image and the border. https://i.sstatic.net/FWLIN.png https://i.sstat ...

htmlcssimagegoogle-chromescaling

`Moving smoothly with a slider and then reversing direction`

I have implemented a range slider to control the value in an input field. The values can vary greatly, so I needed finer control for lower numbers that gradually expands for larger numbers. To address this issue, I utilized an easing equation based on the ...

javascriptangularjsionic-framework

Encountering issues while establishing a connection to SQL Server through Node.js

I've developed a Node.js application to interact with SQL Server. Here's the code snippet: app.get('/SalesStatistics', function (req, res) { var Connection = require('tedious').Connection; // configuration for the databas ...

javascriptnode.js