Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Question

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Looking for a CSS Solution:

Is there a way to achieve element.scrollLeft functionality in CSS without using javascript? I want to pre-scroll a scrollable container.

Situation Overview:

I have a scrollable container that houses various items. Some instances of this container may overflow, and I would like the scroll offset to automatically be positioned at the end.

https://i.stack.imgur.com/iTmUu.jpg

The Teaser:

While I currently use javascript to manipulate the scroll position effectively, there is a perceptible jitter or sudden movement within the scrollable content. Can anyone suggest a pure CSS technique to preset the scroll position?

Check out Code Sandbox for sample code: https://stackblitz.com/edit/js-9b9wt5?file=index.html

const cardContainerEls = document.querySelectorAll('.card-container');
  cardContainerEls.forEach((el) => {
  el.scrollLeft = 1000;
});

javascript css css-animations

Answer 1

Answer №1

Check out this interesting fiddle that allows for both horizontal and vertical scrolling using pure CSS without any JavaScript. Feel free to customize it to suit your specific requirements: https://jsfiddle.net/1Lfybv56/2/

HTML

<span id="top"></span>

<div id="anchors">
  <a href="#red">Red</a>
  <a href="#blue">Blue</a>
  <a href="#green">Green</a>
  <a href="#yellow">Yellow</a>
</div>

<div id="red"><a href="#top">Top</a></div>
<div id="blue"><a href="#top">Top</a></div>
<div id="green"><a href="#top">Top</a></div>
<div id="yellow"><a href="#top">Top</a></div>

CSS

html {
    scroll-behavior: smooth;
    white-space: nowrap;
}

#anchors a {
  display: block;
}

a {
    display: inline-block;
    background: #fff;
    padding: 4px;
}

div {
    display: block;
    height: 400px;
    width: 400px;
    padding: 4px;
    border: 2px solid grey;
    position: relative;
}

#red {
    background: red;
    left: calc(412px * 1);
}
#blue {
    background: blue;
    left: calc(412px * 2);
}
#green {
    background: green;
    left: calc(412px * 3);
}
#yellow {
    background: yellow;
    left: calc(412px * 4);
}

Answer 2

Check out this interesting fiddle that allows for both horizontal and vertical scrolling using pure CSS without any JavaScript. Feel free to customize it to suit your specific requirements: https://jsfiddle.net/1Lfybv56/2/

HTML

<span id="top"></span>

<div id="anchors">
  <a href="#red">Red</a>
  <a href="#blue">Blue</a>
  <a href="#green">Green</a>
  <a href="#yellow">Yellow</a>
</div>

<div id="red"><a href="#top">Top</a></div>
<div id="blue"><a href="#top">Top</a></div>
<div id="green"><a href="#top">Top</a></div>
<div id="yellow"><a href="#top">Top</a></div>

CSS

html {
    scroll-behavior: smooth;
    white-space: nowrap;
}

#anchors a {
  display: block;
}

a {
    display: inline-block;
    background: #fff;
    padding: 4px;
}

div {
    display: block;
    height: 400px;
    width: 400px;
    padding: 4px;
    border: 2px solid grey;
    position: relative;
}

#red {
    background: red;
    left: calc(412px * 1);
}
#blue {
    background: blue;
    left: calc(412px * 2);
}
#green {
    background: green;
    left: calc(412px * 3);
}
#yellow {
    background: yellow;
    left: calc(412px * 4);
}

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Looking for a CSS Solution:

Situation Overview:

The Teaser:

Answer №1

Similar questions

The use of jQuery.parseJSON is ineffective for a specific string

Troubleshooting AJAX, PHP, and mySQL Interactions

Mastering Light and Camera Selection in Three.js

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

The text is exceeding the boundaries of its container, displaying in a single line that extends beyond the page

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

Basic animation feature malfunctioning

Restrict access to PHP scripts to only be allowed through AJAX requests

Issue with Angular 6: Animation with LESS is failing to work post deployment

C#: Issues with loading static content in MVC on various environments with IIS

Staggered Drop-Down Menus

"Customizing FusionCharts: A step-by-step guide to changing the background color

What should the AJAX file in TagManager jQuery look like?

Ways to engage with a fixed html page generated by an Express router?

Getting files onto your device - the Phonegap way

I'm interested in developing a React function that generates recipe components based on a set of instructions provided in an array, along with a separate parameter specifying the recipe name

Ajax polling ceases the polling process when an internet connection is lost

Unable to retrieve or remove cookie sent from Express on client side

Why isn't Material UI Data Grid onCellEditCommit working? Wondering if anyone has insight

WebSocket connection was unsuccessful. Switching to Comet and resending the request