Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars.

The vertical scroll bar should only navigate through the table rows, as the headers remain static at the top.

However, when scrolling horizontally, it is essential that both the rows and headers move together. This has been achieved by encompassing both the headers and body within a container div set to overflow-x: auto. The body itself has overflow-y: auto specified.

An issue arises from this configuration where the vertical scroll bar becomes hidden if you scroll all the way to the right since the body is nested within the horizontal scroll div.

I am looking for a solution where both scroll bars are constantly visible but only affect their respective content.

To illustrate this problem, I have created a demonstration on CodePen:

https://codepen.io/ntroncoso/pen/rmbrYQ

The key elements to focus on are the tableContainer and body:

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 800px;
}

These styles effectively generate the required scroll bars, yet the vertical one disappears when the body content exceeds the width. Any applicable Javascript solutions would be greatly welcomed.

Answer №1

You should consider changing the "min-width" to a max width and removing the "overflow-x:auto;"

Visit this link for more details.

<div id="html">
 <div id="container">
    <div id="tableContainer">
      <div id="body">
      <div id="header">
        <div class="head">Header 1</div>
        <div class="head">Header 2</div>
        <div class="head">Header 3</div>
        <div class="head">Header 4</div>
      </div>
        <table id="table">
    <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td</tr>
    ...
    <tr><td>R22C1</td><td>R22C2</td><td>R22C3</td><td>R22C4</td></tr>  
    </table>
  </div>
    </div>
    <div id="footer">
      The footer
    </div>
  </div>
</div>

CSS

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-width: 800px;
}

#header{
  display: flex;
  flex: row;
  box-sizing: border-box;
  padding: 5px;
  min-width: 800px;
  margin-bottom:15px;
 }

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

Encountering an issue with Google distance matrix where property 'text' is undefined

Below is a snippet of code that calculates the distance between two user-provided addresses. This code currently runs when the user submits a form in this manner: $("#distance_form").submit(function (e) { e.preventDefault(); calculateDistance(); }); ...

KineticJs: Enhancing Rotation with Multitouch Capability

Currently, I have a click event implemented in my code that rotates my puzzle piece by 90 degrees when clicked. However, I would like to change it from a mouse click to a touch event. How can I achieve this? Thank you. piecesArray[i][j].shape.on("mous ...

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

Enter information into the TextArea and jQuery dialog

I require assistance in populating a textarea with data obtained from querying a database. I have a jQuery dialog that contains another dialog, inside of which is a textarea. Here is some pseudocode: <MODAL> <modalB> <TextArea>s ...

Sometimes I receive a notification that the session ID cannot be regenerated because the session is not active, without any apparent cause

Despite reading numerous posts on this problem, none have provided a solution for me! Some suggest that using session_regenerate_id(true); before session_start(); could be causing the issue. However, this is not applicable to my code. Others recommend remo ...

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

Tab Focus discrepancy observed in Mozilla browser

Tab Focus issue with elements on Mozilla Firefox: <div class="editor-field"> <div> <%: Html.TextBox(model => model.AddressLine1, new { maxLength = 30, style = "width:300px", tabinde ...

What is the method for adjusting the border color of an ng-select component to red?

I am having an issue with the select component in my Angular HTML template. It is currently displaying in grey color, but I would like it to have a red border instead. I have tried using custom CSS, but I haven't been able to achieve the desired resul ...

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness. Below is my HTML structure: <div class ...

Preventing special characters in an input field using Angular

I am trying to ensure that an input field is not left blank and does not include any special characters. My current validation method looks like this: if (value === '' || !value.trim()) { this.invalidNameFeedback = 'This field cannot ...

Glitch found in Safari involving innerText of elements

Hey everyone, I posted this question not too long ago but now I have some images to share regarding the issue with Safari. When checking the console in Safari, the following text is displayed: <div id="rot3posDisp" class="rotDisp">C</div> Ho ...

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

What methods can I use to extract particular information from HTML when working with React?

I am currently working with an API that returns a preformatted HTML file containing CSS styles and ID tags that indicate specific information I need to extract. The challenge is that the HTML code is not very visually appealing, and I want to render it usi ...

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

Guide to Hosting HTML on a Server Separate from Heroku

I currently have my index.html and the necessary .js files hosted on Heroku, where everything is functioning properly. However, I wish to avoid directing my users to "myappname.herokuapp.com", so I am considering using my own website to host the .html file ...

PHP - Easily send emails with attachments

Below are the codes I am using to send an email with an attachment: if (isset($_POST['submit'])) { @$name=stripslashes($_POST['name']); @$last_name=stripslashes($_POST['last_name']); @$phone=stripslashes($_POST['phone&a ...

What HTML template is your go-to when starting a new project?

Is this the ultimate solution for creating a basic "Hello World" HTML template? I have been experimenting with this starter code to develop simple websites. Are there any other interesting tags I could incorporate to enhance it further? Usually, I refer ...