Is there a way to use a media query on a div element to check for the presence of a scroll bar?

Question

Is there a way to use a media query on a div element to check for the presence of a scroll bar?

A div has been styled with overflow-y: auto, triggering the appearance of a vertical scroll bar when the content exceeds the height of the div. This causes the content to shift horizontally to accommodate the scroll bar, resulting in misalignment with the headers positioned above the div.

No Scroll Bar:

With Scroll Bar:

The query is whether CSS offers a method to detect the appearance of the scroll bar and incorporate padding/margin adjustments to the right of the headers accordingly.

An attempt was made using containment (reference: https://www.w3.org/TR/css-contain-3/) as follows:


                     .drivers-box {
                        padding: 5px;
                        border: 1px solid $ra-pam-control-border-grey;
                        width: 100%;
                        height: 65px;
                        overflow-y: auto;
                        container-type: inline-size;
                    }

                    .driver-header {
                        padding: 0 6px;
                    }
                    
                    @container (min-width: 280px) {
                        .driver-header {
                            padding: 0 15px 0 6px;
                        }
                    }

<div class="drivers">
    <div class="driver-row driver-header">
        <div style="font-weight: 100">{{ 'CEBM_DRIVERS_LABEL' | translate }}</div>
        <div class="driver-row-btns">
            <i class="fas fa-chart-scatter" style="cursor: auto;" title="show in scatter plot"></i>
            <i class="fas fa-chart-line" style="cursor: auto;" title="show in time series"></i>
            <i class="fas fa-fill" style="color: red; cursor: auto" title="select series color"></i>
            <i class="fas fa-trash" style="cursor: auto;" title="delete driver"></i>
        </div>
    </div>
    <div class="drivers-box">
        <div class="driver-row" ng-repeat="driver in drivers">
            <div>{{ driver.name }}</div>
            <div class="driver-row-btns">
                <input type="checkbox" title="show in scatter plot" ng-checked="driver.showInScatterPlot" ng-click="showInScatterPlotClicked(driver.id)" />
                <input type="checkbox" title="show in time series" ng-checked="driver.showInTimeSeries" ng-click="showInTimeSeriesClicked(driver.id)"/>
                <i ng-style="{ color: driver.color }" class="fas fa-circle" title="select series color" ng-click="seriesColorClicked(driver.id)"></i>
                <i class="fas fa-trash" title="delete driver" ng-click="deleteDriverClicked(driver.id)"></i>
            </div>
        </div>
    </div>
    <button class="mini-btn" style="margin-top: 5px;" ng-click="addDriverClicked()">{{ 'CEBM_ADD_DRIVER_BTN_TEXT' | translate }}</button>
</div>

However, this implementation yielded no results, suggesting that it does not recognize the terms container-type or @container (used within an SCSS file).

The question now arises - is containment being utilized correctly? Is there another approach to address this issue effectively?

Your insights are greatly appreciated!

css sass media-queries scrollbar

Answer 1

Answer №1

Various web browsers, as well as different CSS styles, can cause the scrollbar to appear with varying widths. Relying on a method that checks for the presence of a scrollbar would therefore be unreliable.

If your data is in a tabular format, here is an example of using an HTML table where the header remains fixed while the rest of the rows scroll.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="vieWport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Title</title>
  <style>
    .container {
      height: 5em;
      overflow: auto;
      width: 20em;
    }
    
    input:checked~.container {
      height: 20em;
    }
    
    table {
      width: 100%;
    }
    
    thead {
      position: sticky;
      top: 0;
      background: white;
    }
    
    th,
    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <input type="checkbox" id="toggle"><label for="toggle">Click to make the container height bigger/smaller</label>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Answer 2

Various web browsers, as well as different CSS styles, can cause the scrollbar to appear with varying widths. Relying on a method that checks for the presence of a scrollbar would therefore be unreliable.

If your data is in a tabular format, here is an example of using an HTML table where the header remains fixed while the rest of the rows scroll.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="vieWport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Title</title>
  <style>
    .container {
      height: 5em;
      overflow: auto;
      width: 20em;
    }
    
    input:checked~.container {
      height: 20em;
    }
    
    table {
      width: 100%;
    }
    
    thead {
      position: sticky;
      top: 0;
      background: white;
    }
    
    th,
    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <input type="checkbox" id="toggle"><label for="toggle">Click to make the container height bigger/smaller</label>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Is there a way to use a media query on a div element to check for the presence of a scroll bar?

Answer №1

Similar questions

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

What is the best way to create a border that surrounds a collection of pictures?

When utilizing the tab key on Chrome, the iFrame fails to scroll

Enhancing User Experience with Animated jQuery Progress Bar

Get rid of the .php extension in the URL completely

Is there a way to spin the picture but keep the container still?

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Adjusting the content of mat-cards to fill in blank spaces

Tips on choosing a button and applying custom styles with emotion styles in MUI

Position a div to float in the top right corner without overlapping its sibling header

Align the checkbox input in the center of a flexbox container

Creating your own unique CSS animation or transition timing function is a great way to add a

Is it possible to disable the pointer event on the parent element only in CSS

Utilizing the empty space to the right of an image in HTML

What is the best way to swap out an icon based on the chosen option?

Encountering an issue with multi ./src/styles.scss during the deployment of my Angular application on Heroku

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

attempting to display an element using jQuery that belongs to the identical class

Is there a way to make my red div switch its background color from red to green when I press the swap button?

I'm searching for a universal guidebook on creating web page layouts