Define the position of a scrolled area within an HTML document to create a

Question

Define the position of a scrolled area within an HTML document to create a

In my current project, I have a scrollable area that highlights the selected div in gray. The HTML is written using Ember (hbs) and includes code to handle this functionality. Below is an example of how the div looks:

https://i.sstatic.net/T2Lur.png

Here is the corresponding HTML (hbs):

<div role="listbox" style="overflow-y: auto">
  {{#each @variables as |var|}}
    <div class="variable-row  {{if (eq var @selectedVar) "selected-row"}}">
      {{var}}
    </div>
  {{/each}}
</div>

Additionally, here is the CSS used to style the selected row:

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

One issue I am facing is that when the selectedVar is not visible within the scrollable area, such as when it is below other elements and needs to be scrolled into view. Is there a way to automatically scroll to the element with the selectedVar? Perhaps by modifying the HTML structure or adding some CSS classes?

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

javascript html css ember.js

Answer 1

Answer №1

A few possibilities to consider

Display using a selector, and implement scrollIntoView
Invoke a function directly from the template through a modifier, utilizing scrollIntoView -- this approach is advantageous for its reactivity

Function Invocation

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

and in your JavaScript code, you can call this function at an appropriate time:

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

Utilizing a Modifier

refer to: 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 feature will automatically scroll your list when the value of @selectedVar changes

Answer 2

A few possibilities to consider

Display using a selector, and implement scrollIntoView
Invoke a function directly from the template through a modifier, utilizing scrollIntoView -- this approach is advantageous for its reactivity

Function Invocation

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

and in your JavaScript code, you can call this function at an appropriate time:

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

Utilizing a Modifier

refer to: 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 feature will automatically scroll your list when the value of @selectedVar changes

Define the position of a scrolled area within an HTML document to create a

Answer №1

Function Invocation

Utilizing a Modifier

Similar questions

Using 2 viewports depending on the device

Retrieving data from the Vuex store in a Nuxt component

Generating an HTML table with JSON data in JavaScript

Gradually shifting alignment of Bootstrap tooltips

Instructions for printing a page and closing the Print window using Selenium

Issues with keyboard accessibility in drop down menus

Does modifying data from an AngularJS service update the original data within the service?

The utilization of Server.Execute leads to inaccurate HTML rendering exclusively on IE9

Resolving the Smooth Scrolling Problem

Can you explain the distinction between using .classA versus .classB.classA when styling with CSS?

Emails sent through an HTML form submission should always include a valid "from"

Category-Specific Page Display

The <b-list-group-item> component in a Vue.js CLI application using bootstrap-vue is failing to render

Warning: Validation issue in console.js at line 213 - It is not valid for a <div> element to be nested inside a <p> element. Please correct this nesting validation

Building a class structure with a JavaScript MVC approach - best practices

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

What is the best way to conceal an element when another element is given a specific class?

Mixed Protocol Error (HTTP/HTTPS)

finding the node version in a code repository