Vertical scroll through a list of columns with a stationary header, while allowing both the list and the header to

Check out this JSFiddle example: https://jsfiddle.net/jefftg/1chmyppm/

The layout currently has orange header columns and white list rows that scroll together horizontally. However, the goal is to have the white list rows scroll vertically while keeping the orange header fixed at the top. This behavior is intended for modern browsers using HTML5/CSS3.

CSS Styles:

.container {
  width: 800px;
  height: 600px;
  overflow-x: auto;
  overflow-y: hidden;
}

.header-container {
  display: flex;
}

.header-cell {
  height: 40px;
  min-width: 500px;
  background-color: orange;
  border: 1px solid red;
}

.data-container {
  overflow-y: auto;
  overflow-x: hidden;
  display: inline-block;
}

.data-row {
  overflow-x: hidden;
  display: flex;
}

.data-row-cell {
  height: 30px;
  min-width: 500px;
  background-color: white;
  border: 1px solid black;
}

HTML Structure:

<div class="header-container">
  <div class="header-cell">A</div>
  <div class="header-cell">B</div>
  <div class="header-cell">C</div>
  <div class="header-cell">D</div>
</div>

<div class="data-container">
  <div class="data-row">
    <div class="data-row-cell">
      A1
    </div>
    <div class="data-row-cell">
      B1
    </div>
    <div class="data-row-cell">
      C1
    </div>
    <div class="data-row-cell">
      D1
    </div>
  </div>

  ......

</div>

htmlcss

Answer №1

You can achieve this using only CSS, no need for JavaScript.

I have updated your JSFiddle to meet your requirements: https://jsfiddle.net/48386nvn/3/

In summary, the .header-container must be positioned absolutely relative to the .container element:


.container {
  width: 800px;
  height: 600px;
  overflow-x: auto;
  overflow-y: hidden;
  /* added this: */
  position: relative;
}

.header-container {
  display: flex;
  /* added these: */
  position: absolute;
  top: 0;
  left: 0;
}

The provided CSS will fix the placement of the orange header and maintain its required width.

Additionally, you need to make the data section scrollable by calculating the following:

height: heightOfParentContainer - heightOfHeaderRow;

The height of the header row is 40px (42px with borders) and it also requires a margin-top equal to the height of the header row:

.data-container {
  overflow-y: auto;
  overflow-x: hidden;
  display: inline-block;
  /* added these: */
  margin-top: 40px;
  height: 560px;
}

This setup ensures that the header row does not overlap the data section and that the data fills the remaining space in the overall container.

Answer №2

After some experimentation, the solution that worked for me was setting the height of .data-container to 558px: view the updated code here - jsfiddle.net/jefftg/1chmyppm/2

Answer №3

Applying overflow to specific elements that require scrolling is more efficient than including it on every element.

To achieve the desired effect, I updated your .data-container to have a display:block property and a set height for the use of overflow-y:auto. Feel free to adjust the height to suit your page layout.

Here is my solution in action:

$(".header-container").scroll(function() {
  var scrollPercentage = 100 * this.scrollLeft / (this.scrollWidth - this.clientWidth);
  $(".data-container").scrollTop(scrollPercentage);
});
.container {
  width: 800px;
  height: 600px;
}
.header-container {
  display: flex;
  overflow-x: auto;
}
.header-cell {
  height: 40px;
  min-width: 500px;
  background-color: orange;
  border: 1px solid red;
}
.data-container {
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  height: 100px;
}
.data-row {
  display: block;
}
.data-row-cell {
  height: 50px;
  min-width: 500px;
  background-color: white;
  display: block;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-container">
  <div class="header-cell">A</div>
  <div class="header-cell">B</div>
  <div class="header-cell">C</div>
  <div class="header-cell">D</div>
</div>

<div class="data-container">
  <div class="data-row">
    <div class="data-row-cell">
      A1
    </div>
    <div class="data-row-cell">
      B1
    </div>
    <div class="data-row-cell">
      C1
    </div>
    <div class="data-row-cell">
      D1
    </div>
  </div>

  ......

</div>

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

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome: Currently, I have the following (focusing only on the left element for now): I am struggling to make the left arrow transparent and I can't seem to figure out how. This is the CSS Code I have so far: .ma ...

htmlcss

Unable to add padding to <b> tag

Can anyone explain why the padding-top property is not taking effect for the <b> tag? Check out this link <b>hello world</b>​ b { padding-top: 100px; } ​ ...

css

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

Can HTML Elements be used within a Contenteditable section?

I am facing an issue with a contenteditable tag on my website. Users are unable to type code into the tag and have it display as an actual element instead of just text. Is there a way for users to input full, working HTML elements in a contenteditable box ...

javascripthtml

Expanding the size of select dropdown in Material UI to accommodate more options

Is there a way to increase the width of the drop down to 400px? I tried adding inline styles, but it didn't work. Upon debugging, I realized that the width is being overridden by this class. I'm not sure how to overwrite it. Could you please prov ...

javascripthtmlcssreactjsmaterial-ui

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

htmlcssimageonclickclick

Checking for the existence of a CSS selector in Jasmine test suite

Testing out the latest version of Jasmine and Karma with an AngularJS instance. I attempted: expect(element('a.topic-heading-link-10')).toBeDefined(); However, I received this response: expect undefined toBeDefined undefined http://example.co ...

cssangularjsjasminekarma-runner

Adjusting the size of an element in Angular JS as a textarea expands

I have created a directive that allows for writing and previewing comments, similar to the conversations in Github. The directive consists of two HTML elements: a textarea and a div (utilizing angular-marked). My goal is to dynamically resize the div as I ...

htmlangularjsresize

Ways to conceal the contents of a page behind a transparent background div while scrolling

I created a Plunkr with the following markup: <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"& ...

htmlcsstwitter-bootstrap

The enigmatic "margin-30" element within adaptable layout design

Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...

htmlcssbootstrap-4

Tips for emphasizing v-list-item on click (Vue)

I am currently working on a side menu that changes based on the selected router model. My goal is to have the selected page highlighted when clicked. I would like this functionality for all the submenus as demonstrated in this example. Below are snippets ...

javascripthtmlcssvue.jsuser-interface

discovering the category for the .click function

After retrieving a list of book objects from a JSON object, I am in the process of displaying them on an HTML page by creating buttons with titles. The goal is to alert the URL of the book when a button is clicked. However, I am facing an issue with access ...

javascriptjqueryjsonhtml

I can't get Toggleclass to switch classes properly, am I missing something?

I have been experimenting with creating a button that toggles a class and reveals another div below it. Feel free to check out the example on jsFiddle that I created for you. While the first function of showing and hiding the div is working perfectly, I ...

jqueryhtmlcss

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Is there a way to have the font size in an H1 adjust dynamically to fill the entire width of the H1 using just CSS?

My h1 Element <h1>Title Of Element<h1> The h1 has a width of 200px h1{width:200px;} Although the h1 is indeed 200px wide, the text inside does not fully utilize that width. I expected setting font-size to 100% h1{font-size:100%;} However, t ...

htmlcss

What causes the navbar-brand to be hidden on Chrome mobile browsers?

I recently completed building my website at emdashr.com and have been adjusting the mobile views. However, I'm facing an issue where the navbar-brand disappears when viewing the site on mobile Chrome or desktop Chrome with a small viewport. Interestin ...

htmlcsstwitter-bootstrap

Looking to tidy up the HTML produced by JQueryUI?

Is there a way to achieve this? I am developing a template generator that includes resizable and draggable elements within a preview window. The issue arises when I try to extract the generated HTML, as it contains unwanted JQueryUI classes and divs for ea ...

javascriptjqueryhtml