scollbar not updated while using height transition

[ducheng1]

When I use transition for a container to animate its change on height, the scrollbar just not updated and can't scroll anyway, until another container appears and change the parent element's height.

how this problem occured

codes

  <div
    :class="`regular-layout flex flex-col relative
      !collapsed ? 'opened' : ''
    `"
    :style="maxHeight && collapsed ? { height: maxHeight } : {}"
  />

.regular-layout {
  max-width: calc(100% - 32px);
  margin: 16px;
  color: var(--trim-text-color);
  transition: height 0.25s;
  overflow: hidden;
}

.opened {
  height: v-bind(elHeight);
}

[KingSora]

@ducheng1 Good day :)

You have to use the update.elementEvents option for the library to update itself when the transition is finished:

<OverlayScrollbarsComponent
  options={{ 
    update: { 
      elementEvents: [['img', 'load'], ['*', 'transitionend']] 
    } 
  }}
/>

This configuration describes that the plugin will update when an img element dispatched a load event and when any (*) element dispatched the transitionend event.

You can also use this options:

<OverlayScrollbarsComponent
  options={{ 
    update: { 
      elementEvents: [['img', 'load'], ['*', 'transitionstart transitionend']] 
    } 
  }}
/>

To register multiple events to a single selector.

[ducheng1]

thanks a lot and have a good day😊

[KingSora]

@ducheng1 you're welcome :)