No JavaScript needed: Create custom overflow/scroll indicators using CSS only

Is there a way to align the content of a box to the left when the box doesn't overflow? I have a scroll indicator created with CSS only, which works well but has this alignment issue. Any suggestions or improvements on the code are welcome :)

html {
  background: #FFF;
}

.scrollbox ul {
  white-space: nowrap;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin-left: -4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
}

.scrollbox {
  outline: 1px dotted black;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  word-wrap: nowrap;
  max-width: 200px;
  margin: 50px auto;
  background: #FFF no-repeat;
  background-image:
    -webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    -webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
  background-image:
    -o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    -o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
  background-image:
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
  background-position: 0 0, 100% 0;
  background-size: 1rem 100%;
}

.scrollbox::before,
.scrollbox::after {
  content: '';
    position: relative;
    z-index: -1;
    display: block;
    width: 2rem;
    margin: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
}

.scrollbox::before {
  background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
  background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));
  background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0));
}

.scrollbox::after {
  background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF));
  background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
  background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);
  background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF);
}
<div class="scrollbox">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>


<div class="scrollbox">
  <ul>
    <li>Ah! Scroll right!</li>
    <li>2 Lorem Ipsum</li>
    <li>3 Lorem Ipsum</li>
    <li>4 Lorem Ipsum</li>
    <li>5 Lorem Ipsum</li>
    <li>6 Lorem Ipsum</li>
    <li>7 Lorem Ipsum</li>
    <li>8 Lorem Ipsum</li>
    <li>9 Lorem Ipsum</li>
    <li>10 Lorem Ipsum</li>
    <li>11 Lorem Ipsum</li>
    <li>12 Lorem Ipsum</li>
    <li>13 Lorem Ipsum</li>
    <li>14 Lorem Ipsum</li>
    <li>15 Lorem Ipsum</li>
    <li>16 Lorem Ipsum</li>
    <li>17 Lorem Ipsum</li>
    <li>18 Lorem Ipsum</li>
    <li>19 Lorem Ipsum</li>
    <li>20 Lorem Ipsum</li>
    <li>21 Lorem Ipsum</li>
    <li>22 Lorem Ipsum</li>
    <li>23 Lorem Ipsum</li>
    <li>24 Lorem Ipsum</li>
    <li>25 Lorem Ipsum</li>
    <li>26 Lorem Ipsum</li>
    <li>27 Lorem Ipsum</li>
    <li>28 Lorem Ipsum</li>
    <li>29 Lorem Ipsum</li>
    <li>30 The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

css

Answer №1

Here's a solution that worked for me:

  • Replace width: 2rem; with min-width: 2rem;
  • Add max-width: 2rem; to .scrollbox::before

I tested this only on Chrome (macOS and Android).

html {
  background: #FFF;
}

.scrollbox ul {
  white-space: nowrap;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin-left: -4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
}

.scrollbox {
  outline: 1px dotted black;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
...

    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

Answer №2

To remove the padding on the left side of your list inside the scrollbox, you can set padding-left: 0 in your CSS for the .scrollbox ul element, as it has default padding applied to it.

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

When employing a CSS combination of `position: fixed;` and `display: flex;`, the upper portion of the inner element is excised and out of reach

I'm currently working on a fullscreen modal and facing an issue with centering the content vertically when it is smaller than the screen. Additionally, I need the content to start at the top and allow scrolling when its height exceeds the container&ap ...

htmlcss

Leverage the power of effekt in your AngularJS development

Can anyone demonstrate how to implement animation effects with AngularJS? Has someone created an example using Effeckt.css? ...

cssangularjsangularjs-animation

Image placed as background for registration form

In my Vue project, I am trying to create a login form with an image as the background. However, I am facing an issue where the image is not displaying on the page. Can someone guide me on how to add a picture behind the form? HTML: Below is the HTML code ...

htmlcssvue.js

The element will only show up upon resizing (in Safari web browser)

I am facing a problem with a button styled using the class btn-getInfo-Ok <button class="btn-getInfo-Ok">Hello</button> in my style.css file .btn-getInfo-Ok { color:white !important; margin: 0 auto !important; height:50px; bottom:0; ...

javascriptjqueryhtmlcsssafari

What is the reason for the excessive width of the final column in this table?

I am currently working with a dataset that I am displaying using the handsontable library in the form of a table. One issue I am facing is that the last column of my table appears too wide even though I did not specify any width for it. Below you can see t ...

javascriptjqueryhtmlcsshandsontable

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

htmlcsshtml-tabletwitter-bootstrap-4

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. Here is the HTML code for the card: <div class="container"> <div class="flex-row row"> <div class="col ...

htmlcss

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

What is the solution for the error "At-rule or selector required" ?

Can someone help me with my CSS code issues? I'm having trouble on the first and last lines. Total newbie here :) Error Messages: at-rule or selector expected (ln 1, Col 1) at-rule or selector expected (ln 51, Col 1) &bso ...

css

Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios. Scenario 1: The fi ...

htmlcss

The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...

htmlcssopera

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

htmlcssbootstrap-5

Scroll automatically when dragging the mouse

My D3 tree creation is causing an issue with the horizontal scroll bar in Firefox 37. When trying to drag select a tree node, the horizontal scroll bar does not work. However, in Chrome, the horizontal scroll works fine during drag selection. <div cl ...

jquerycssd3.js

Speed up the opening and closing of a div element on mouse hover

Looking to create a smooth delay for opening and closing a div when mouse hover. Here is the code I have: function show_panel1() { document.getElementById('hoverpanel1').style.display="block"; } function hide_panel1() { document.getElementByI ...

javascriptjqueryhtmlcss

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...

javascriptjqueryhtmlcss

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...

htmlcss

What is the best way to retrieve information from a data set?

After borrowing some basic HTML, CSS, and JavaScript code from CodePen, I ran into an issue while attempting to convert it to React. The error message says that it cannot read properties of null (specifically 'dataset'). Here is the JavaScript c ...

javascripthtmlcssreactjsfrontend

What is the best way to eliminate the blank space between div elements on a webpage?

I'm currently working on enhancing my portfolio website, and I'm struggling to eliminate the excessive white space. After inspecting the element, it appears that there is styling related to ul.AMSI, but it's not referenced anywhere in my st ...

htmlcssmarginpadding

Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

csssassag-grid