Scroller fade test

by Ben Gillbanks

HTML

<p>I want to make the slider fade out on the edges. I am using the red colour to make the problem obvious. I do not want the fades to move when scrolling.</p>

<p><strong>Lot's of elements, the red moves when scrolling but should stay still.</strong></p>

<div class="timeline-wrapper-wrapper">
    
<section class="timeline-wrapper">
    <div class="timeline">
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
    </div>
</section>
</div>

<hr />

<p><strong>A few elements, displays as intended.</strong></p>

<section class="timeline-wrapper">
    <div class="timeline">
        <div class="frame"></div>
        <div class="frame"></div>
        <div class="frame"></div>
    </div>
</section>

SCSS

.timeline-wrapper {
	
	position: relative;
	overflow-x: scroll;
    text-align: center;
	
    }
    
    .timeline-wrapper-wrapper {
        position: relative;
    
	&::before,
	&::after {

		content: '';
		display: block;
		width: 6rem;
		background: linear-gradient( to left, #eee, transparent);
        position: absolute;
        top:0;
        bottom:10px;

		z-index: 10;

	}

	&::before {

         background: linear-gradient( to right, #eee, transparent );

	}

	&::after {

right: 0;

	}

}

.timeline {
	
	display: inline-flex;

}

.frame {

	width: 5rem;
	background: black;
	height: 5rem;
	margin: 1rem;
	border-radius: 0.3rem;
	
}

body {
  
	background: #eee;
	padding: 2rem;
    font-family: Arial, sans-serif;
    line-height: 1.6;

}

p {
  
  margin-bottom: 2rem;
  
}

hr {
  
  margin: 2rem 0;
  
}