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

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the ...

javascriptcss

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

htmlcsshovervisibility

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

htmlcsstext

Add a flexible element to a container without disrupting the alignment of the other

I'm facing a challenge in adding an action button to the end of a grid layout without affecting the centering of the items. The button should seamlessly fit into the grid, just slightly offset. If you check out my demo, you'll see what I mean. ...

htmlcssflexbox

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such a ...

javascripthtmlcsssvgsnap.svg

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

htmlcss3d

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

As a beginner, I realized too late that adding code in comments is not an option. Consequently, I decided to create a new question and ask for your assistance once again. To optimize the use of space, I have implemented bxSlider with fixed dimensions (wid ...

javascriptjqueryhtmlcss

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

htmlcssheightbackground-color

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Greetings! I successfully converted an XD file to HTML and CSS code. I tested it on my Windows PC, but I haven't had the chance to test it on a Macbook yet. Details: I implemented a button with a pseudo element to show a right arrow on the right side ...

htmlcss

What is the best way to replicate floats using flexbox?

Currently, I am exploring the possibility of using flexbox in a similar manner as floats. My main aim is to have one child element create a column on the right side, while the rest of the children form another column on the left side. The challenge is that ...

cssflexboxcss-float

Select Menu (Code Languages:CSS, JS, HTML, BBCode)

I'm currently in the process of setting up a BB code for a forum I moderate. Here's the code snippet I'm using to generate a dropdown box that users can add to the signature field of their profiles: <!DOCTYPE html> <html> <d ...

javascripthtmlcss

Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...

javascripthtmlcssvue.jsvuetify.js