Using CSS alone, you can scroll a DOM item into view

Question

Using CSS alone, you can scroll a DOM item into view

If I have a lengthy list of items, only one of which is marked as active. Imagine being able to switch the active selection using keyboard inputs (press arrow down and the item below becomes active). Let's say the list of items is taller than the viewport and requires scrolling.

Is it possible to ensure that the active item always remains visible using CSS alone?

While the JavaScript code provided below can achieve this, I am seeking an alternative method without having to call scrollIntoViewIfNeeded() explicitly. Is there a way to instruct CSS to handle this task instead?

const prevNode = getNode(/* implementation details */)
const nextNode = getNode(/* implementation details */)
prevNode.classList.remove('active')
nextNode.classList.add('active')
nextNode.scrollIntoViewIfNeeded()

This peculiar requirement arises from my usage of React. It feels out of place to programmatically invoke scrollIntoViewIfNeeded() when the classes are actually assigned in a declarative manner (through redux state changes).

I would greatly appreciate any suggestions. In case a straightforward CSS solution isn't feasible, I am open to hearing recommendations on how to efficiently implement this functionality in React for a lengthy list.

Thank you!

javascript css reactjs scroll

Answer 1

Answer №1

Is it necessary for the window to be scrolled to show the active element, or is it sufficient for the active element to just be within view? Also, does the order of these elements make a difference?

If all that's needed is for the active element to be visible, you can utilize display: flex; on the container of the list and use the order property to ensure the "active" element always appears first:

.list-container {
  display: flex;
  flex-direction: column;
}

.list-item{
  order: 2;
}

.list-item.active {
  order: 1;
}

The "active" item will move to the top. When you switch to a different item as active, the prior item will return to its original position in the list while the new active item moves to the top.

Example on JSFiddle: https://jsfiddle.net/vyq9h6ep/

Answer 2

Is it necessary for the window to be scrolled to show the active element, or is it sufficient for the active element to just be within view? Also, does the order of these elements make a difference?

If all that's needed is for the active element to be visible, you can utilize display: flex; on the container of the list and use the order property to ensure the "active" element always appears first:

.list-container {
  display: flex;
  flex-direction: column;
}

.list-item{
  order: 2;
}

.list-item.active {
  order: 1;
}

The "active" item will move to the top. When you switch to a different item as active, the prior item will return to its original position in the list while the new active item moves to the top.

Example on JSFiddle: https://jsfiddle.net/vyq9h6ep/

Using CSS alone, you can scroll a DOM item into view

Answer №1

Similar questions

Understanding how event listeners work in documentation

How can I use jQuery to separate special characters from letters in a string?

Concatenate data received from PHP to a JavaScript variable and return it

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

Utilizing function arguments to retrieve values in JavaScript within the framework of CodeIgniter

What could be causing my Javascript prompts to not appear in my Express.IO .ejs file?

Swapping out the video in real-time using an on-demand script

Understanding the grammar of the Web Speech API

What is the reason for utilizing letters as function name and parameters in JavaScript?

Dealing with errors in external URLs with AngularJS: A guide to intercepting errors in $resource or $http services

Having difficulties redirecting with the button's onclick function

Leverage the camera functionality in both native and web applications using Ionic/AngularJS and Cordova

Leveraging node.js and express for incorporating custom stylesheets and scripts

What is the best location to store the JWT bearer token?

The declaration file for the 'react-tree-graph' module could not be located

Execute React program within VM Azure

The getStaticProps() function in next.js isn't retrieving items as expected

Bootstrap - A collapsed navigation button that remains fixed without the rest of the navbar

Combining CSS Sprites with D3.js

Vue.js - Difficulty displaying fetched data from API using v-for