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

HTML or JS/jQuery can create disorienting cursor behaviors

Using JSON to insert an array into an object with identical key name

In Stripe.js, the background color and height of the credit card input cannot be customized

Mastering the alignment of Material-UI Menu items

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

Choosing values from a variety of select option boxes using jQuery

Organizing a set of div elements based on their ID attributes

Exploring the capabilities of VueJs in detecting events triggered by parent components

Problem with Ionic App crashing

How to transfer a user's comment from HTML to a C# model through a list within the MVC framework

Ways to eliminate line breaks and <br> tags in text using only CSS to create a button that trunc

Arrange and display similar objects together

Guide to creating a continuous loop for CSS3 animation

Possible rephrased version: "Encountering a Jquery clash

Utilize jQuery ajax to pull in data from an external website

Is it possible to place a secondary read more button next to the first one using CSS?

Utilizing AJAX in Datatables- Effortlessly sharing a URL link to a designated page

Update the positioning of the element to center instead of the default top left origin using jQuery

Utilizing JSON in a d3.js application within a Rails environment

(discovered: [object Promise]) utilizing Material UI and DexieJS