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:

https://i.sstatic.net/jiN3y.png

With Scroll Bar:

https://i.sstatic.net/82ZN0.png

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).

https://i.sstatic.net/HdnIy.png

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 direction of auto-filling in CSS grid?

What is the best way to use CSS to center two blocks with space in between them?

Display information on a web page based on user input using HTML

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Is it necessary for me to watch and compile sass into css before using it in Vue?

Customizing the appearance of checkboxes in React Material-Table filtering feature

Next.js in combination with Tailwind CSS

CSS3: What is causing this issue in FireFox?

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

Header element not keeping the navbar at the bottom

Adjust the background color of alternate elements

Combining the Power of Bootstrap with Yii Framework

The text element does not line up with the icons

Fixed navbar at the top changes from absolute positioning to relative when scrolling

Unable to choose the option from the modal that functions similarly to a drop-down menu

What is the best way to arrange div elements in this particular manner using CSS?

Tips for keeping Sub Menu visible at all times

Enhancing the SVG font size through custom CSS styling

Setting a uniform width for all columns in a table using ReactJS