css scroll-snap: highlighting the snapped element

Question

css scroll-snap: highlighting the snapped element

I created a horizontal grid containing multiple cards that scroll smoothly using CSS scroll-snap functionality when navigated with a mouse or touchscreen.

The issue arises when attempting to navigate the grid using a keyboard. After moving through the grid with arrow keys, pressing tab causes the view to jump back to the element that received focus, rather than staying on the currently snapped card.

My desired outcome is for tab to focus on the card that is currently in view.

Does anyone have any suggestions on how to achieve this?

javascript css

Answer 1

Answer №1

From what I can see, there doesn't seem to be a built-in way to handle this at the moment. However, Nils Schwebel's solution may not be the most elegant, but it appears to be the most effective approach.

Below is a functional demonstration:

Keep in mind that I've added some extra styling for clarity, so you might have to extract the relevant sections after testing.

const main = document.getElementById("Main"),
  sections = document.getElementsByClassName("section");

main.addEventListener('scroll', (e) => {
  // Get the current scroll position (top of the viewport)
  let pos = main.scrollTop;
  for (let i = 0, l = sections.length; i < l; i++) {
    // Calculate the position of the middle of the viewport within the section (adjust if snap items are not full-height)
    let relativePos = sections[i].offsetTop - pos + (sections[i].offsetHeight / 2);
    // Check if the calculated point falls within the section
    if (relativePos >= 0 && relativePos < sections[i].offsetHeight) {
      sections[i].focus();
      break;
    }
  }
});

body {
  margin: unset;
}

main {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #222;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
}

section:focus {
  border: none;
  outline: none;
}

#s1 {
  background-color: #d72748;
}

#s2 {
  background-color: #b51f7e;
}

#s3 {
  background-color: #e64869;
}

#s4 {
  background-color: #e79946;
}

section h2 {
  color: white;
}

<main id="Main">
  <section class="section" id="s1" tabindex="1" aria-labelledby="a1">
    <h2 id="a1">AREA 1</h2>
  </section>
  <section class="section" id="s2" tabindex="1" aria-labelledby="a3">
    <h2 id="a2">AREA 2</h2>
  </section>
  <section class="section" id="s3" tabindex="1" aria-labelledby="a2">
    <h2 id="a3">AREA 3</h2>
  </section>
  <section class="section" id="s4" tabindex="1" aria-labelledby="a4">
    <h2 id="a4">AREA 4</h2>
  </section>
</main>

Answer 2

From what I can see, there doesn't seem to be a built-in way to handle this at the moment. However, Nils Schwebel's solution may not be the most elegant, but it appears to be the most effective approach.

Below is a functional demonstration:

Keep in mind that I've added some extra styling for clarity, so you might have to extract the relevant sections after testing.

const main = document.getElementById("Main"),
  sections = document.getElementsByClassName("section");

main.addEventListener('scroll', (e) => {
  // Get the current scroll position (top of the viewport)
  let pos = main.scrollTop;
  for (let i = 0, l = sections.length; i < l; i++) {
    // Calculate the position of the middle of the viewport within the section (adjust if snap items are not full-height)
    let relativePos = sections[i].offsetTop - pos + (sections[i].offsetHeight / 2);
    // Check if the calculated point falls within the section
    if (relativePos >= 0 && relativePos < sections[i].offsetHeight) {
      sections[i].focus();
      break;
    }
  }
});

body {
  margin: unset;
}

main {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #222;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  scroll-snap-align: center;
}

section:focus {
  border: none;
  outline: none;
}

#s1 {
  background-color: #d72748;
}

#s2 {
  background-color: #b51f7e;
}

#s3 {
  background-color: #e64869;
}

#s4 {
  background-color: #e79946;
}

section h2 {
  color: white;
}

<main id="Main">
  <section class="section" id="s1" tabindex="1" aria-labelledby="a1">
    <h2 id="a1">AREA 1</h2>
  </section>
  <section class="section" id="s2" tabindex="1" aria-labelledby="a3">
    <h2 id="a2">AREA 2</h2>
  </section>
  <section class="section" id="s3" tabindex="1" aria-labelledby="a2">
    <h2 id="a3">AREA 3</h2>
  </section>
  <section class="section" id="s4" tabindex="1" aria-labelledby="a4">
    <h2 id="a4">AREA 4</h2>
  </section>
</main>

Answer 3

Answer №2

To detect if an element is at the top of a scroll view, you can implement a scroll listener and perform the necessary checks. You could consider adapting one of the suggested solutions in this thread: How to check if element is visible after scrolling?

Answer 4

To detect if an element is at the top of a scroll view, you can implement a scroll listener and perform the necessary checks. You could consider adapting one of the suggested solutions in this thread: How to check if element is visible after scrolling?

css scroll-snap: highlighting the snapped element

Answer №1

Answer №2

Similar questions

Mastering the Art of Concise Writing: Tips to

Changing the theme of a toggle button in Jquery Mobile when the button is pressed

When using the require() function in Node.js, the period "." is not being recognized as part of the command and

The issue of page content failing to refresh when loaded using AJAX technology

considering multiple website addresses as one collective entity for the Facebook like button

Passing state to getStaticProps in Next JSLearn how to effectively pass state

Effortless Ways to Automatically Accept SSL Certificates in Chrome

Align text vertically next to an image

What causes the Vuetify checkbox to trigger twice when clicked in a Vue.js application?

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

What is the best way to know which API will return the result the fastest?

Ways to verify the application of CSS hyphens using Chrome's developer tools

Crushing jQuery's Sortable/Droppable

Angular2 bootstrapping of multiple components

What is the best way to design a group of radio buttons with corresponding labels at the top

Change the classes of the body prior to the initial rendering

Is there a way to modify a specific key value in all embedded objects using Mongoose?

Web Browser cross-origin AJAX requests

What are effective ways to eliminate script tags from a webpage?

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to