scrollIntoView not working

💬 App Building
1

Hi everyone,

I have three similar collapsible containers which are by default in showBody: false.

I have a confirm button before them that confirms some selection. This confirm button triggers when clicked the script that is below.

Its goal is to set showBody: true for the relevant containers and scrollIntoView to the next one on the list.

There are similar confirm buttons at the end of all collapsible containers to check where we are in the iteration and if we have visited all the relevant containers already.

Here's the main script that does this navigation.

if (nb_active_cont.value > 0) {
  console.log("Nombre de containers actifs:", nb_active_cont.value);
  console.log("Current container ID:", current_col_cont.id);
  console.log("Last active container ID:", active_containers.value[nb_active_cont.value - 1].id);
  
  if (current_col_cont.value.id !== active_containers.value[nb_active_cont.value - 1].id) {
    console.log("Not at last container yet, proceeding with navigation");
    console.log("Current counter value (col_cont_k):", col_cont_k.value);
    
    console.log("Next container set to:", active_containers.value[col_cont_k.value - 1]);
    
    if (active_containers.value[col_cont_k.value - 1].id.includes('work')) {
      console.log("Navigating to work container");
      col_cont_work.setShowBody(true);
      col_cont_work.scrollIntoView('auto','end');
      current_col_cont.setValue(col_cont_work);
      
    } else if (active_containers.value[col_cont_k.value - 1].id.includes('weekend')) {
      console.log("Navigating to weekend container");
      col_cont_weekend.setShowBody(true);
      col_cont_weekend.scrollIntoView('auto','end');
      current_col_cont.setValue(col_cont_weekend);
      
    } else if (active_containers.value[col_cont_k.value - 1].id.includes('holiday')) {
      console.log("Navigating to holiday container");
      col_cont_holiday.setShowBody(true);
      col_cont_holiday.scrollIntoView('auto','end');
      current_col_cont.setValue (col_cont_holiday);
      
    }
    
    col_cont_k.setValue(col_cont_k.value + 1);
    console.log("Counter incremented to:", col_cont_k.value);
  } else {
    console.log("Reached last container, scrolling to text_range");
    range_is_hidden.setValue(false);
    icon_text_range.scrollIntoView();
  }
} else {
  console.log("No active containers");
}

What happens is that the setShowBody method works perfectly, but the scrollIntoView doesn't and the user view doesn't change.

Any hint on how to solve this?

I tried to change the options of the scrollIntoView but didn't work.

Some pic:

image
image978×356 12 KB

B

3

Hi all,

Any hint on how to solve this?

Thanks,

B

4

Hello @Baptiste_LC ,

The issue likely occurs because the container isn't fully rendered when scrollIntoView is called. Try adding a delay using setTimeout to ensure the element is visible

col_cont_work.setShowBody(true);
setTimeout(() => {
    col_cont_work.scrollIntoView({ behavior: 'smooth', block: 'end' });
}, 100);

Also, ensure the container isn’t hidden by CSS (display: none;, visibility: hidden) and that no parent elements have overflow: hidden blocking scrolling. Use offsetHeight before scrollIntoView to force reflow if needed:

col_cont_work.offsetHeight; // Force reflow
col_cont_work.scrollIntoView({ behavior: 'smooth', block: 'end' });
5 Likes
5

Works like a charm, many thanks!

B

1 Like