html scrollable area define scrolled position-CodePudding

I have the following scrollable area, the html (using ember, so written using hbs) receives the selected div in the scrollable area, and it colors the selected div in gray. (code below).

Here is how the div looks like:

here is the html (hbs)

        <div role="listbox" style="overflow-y: auto">
            {{#each @variables as |var|}}
                <div selected-row"}}">
                    {{var}}
                </div>
            {{/each}}
        </div>

and here is the css:

.selected-row {
  background-color: gray;
}

my issue is when the selectedVar isn't seen (for example var under kkkk needs to be scrolled to be seen) is there anyway I can tell the html to scrolled down to the selectedVar? something like below, or maybe by adding some css?

            {{#each @variables as |var|}}
                <div {{if (eq var @selectedVar) "scroll-to-this-element"}}>
                    {{var}}
                </div>
            {{/each}}

CodePudding user response：

Couple options

render with a selector, and use scrollIntoView
call a function from the template directly via modifier, also using scrollIntoView -- this has the advantage of being reactive

Calling a function

{{#each @variables as |var|}}
  <div data-selected={{ (eq var @selectedVar) }}>
    {{var}}
  </div>
{{/each}}

and then in your js, if you happen to have a good time to call this function

scrollSelectedIntoView() {
  document.querySelector('[data-selected]').scrollIntoView();
}

Using a modifier

see: https://github.com/ember-modifier/ember-modifier

{{#each @variables as |var|}}
  <div {{if (eq var @selectedVar) this.scrollIntoView}}>
    {{var}}
  </div>
{{/each}}

import { modifier } from 'ember-modifier';

// ...

scrollIntoView = modifier((element) => {
  element.scrollIntoView();
});

This will scroll your list when @selectedVar changes as well