Angular (TypeScript): How to scroll to selected element by class

Question

Please don't mark this as duplicate, I have searched and searched and couldn't find a solution

So let's say I have a list of orders called "orders"

In my view I present these orders and their details in a sidebar that has vertical scrolling set:

<div>

    <div id="main-content">
        Main Content
    </div>

    <div id="sidebar">

        <div *ngFor="let order of orders" [ngClass]="{'selected-order': selectedOrder == order}>
           <div>order.orderNumber</div>
           <div>order.orderDetails</div>
        </div>

    </div>

</div>

In my main content I have map that has markers when I click on a marker I'm I want the correct order to be selected and I want the sidebar to scroll and focus on the right order.

This is what I've tried:

function selectMarker() {

    //...omitted code

    // scroll to correct marker in sidebar
    var offset = $(".selected-order").offset();
    $('#sidebar').animate({
        scrollTop: offset.top,
        scrollLeft: offset.left
    }, 1000);
}

This is not working, it's not selecting the right element.

Is there a pure Typescript/Angular solution?

nash11 · Accepted Answer · 2019-08-27 18:55:15Z

4

You can do this using ElementRef and scrollIntoView.

import { ElementRef } from '@angular/core';

...

contructor(private el: ElementRef) { }

function selectMarker() {
    this.el.nativeElement.querySelector('.selected-order').scrollIntoView();
}

answered Aug 27, 2019 at 18:55

nash11

8,7603 gold badges23 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tehila · Accepted Answer · 2019-08-27 17:51:16Z

0

try this:

  function selectMarker() {
        var el = $(".selected-order");
        var sidebar = $('#sidebar');
        var count = el.offset().top - sidebar.offset().top - sidebar.scrollTop();
        if (count < 0) {
            count = el.offset().top - sidebar.offset().top + sidebar.scrollTop();
        }
        sidebar.animate({
            scrollTop: count
        }, 1000);

    }

I ignored scrollLeft, but it should be the same- you shuld pay attention to where the scroll is located then take up/down or left/right

goodluck :]

answered Aug 27, 2019 at 17:51

tehila

1448 bronze badges

Comments

me-and-viy · Accepted Answer · 2020-05-07 14:00:06Z

I was having the same idea to scroll to an element which is selected on some view. So I created a directive with a possibility to pass a class name as parameter.

scroll-to-selected.directive.ts

import { Directive, ElementRef, AfterViewInit, Renderer2, Input } from '@angular/core';
@Directive({
  selector: '[scrollToSelected]'
})
export class ScrollToSelectedDirective implements AfterViewInit {
  @Input() scrollToClass: string;
  constructor(private el: ElementRef, private renderer: Renderer2) {
  }
  ngAfterViewInit() {
    if (this.el.nativeElement.classList.contains(this.scrollToClass)) {
      this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }
}

and the list-item.component.ts itself:

<div class="list-item"
     *ngIf="lostItems$ | async as listItem"
     scrollToSelected
     [scrollToClass]="'selected'"
     [class.selected]="listItem.isSelected">
...
<div>

WasiF · Accepted Answer · 2022-08-25 11:00:33Z

0

scrollIntoView will solve your problem.

element.scrollIntoView()

Be careful while using scrollIntoView, if you used it without options it may scroll your entire page so don't forget to provide necessary options as below.

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

answered Aug 25, 2022 at 11:00

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

Comments

Krishnamoorthy Acharya · Accepted Answer · 2025-01-14 16:48:13Z

0

We can try following

const elementClass: HTMLElement = document.querySelector('.class-name') as HTMLElement;
if(elementClass){
   elementClass.scrollIntoView({ behavior: 'smooth' });
 }

answered Jan 14 at 16:48

Krishnamoorthy Acharya

4,35440 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular (TypeScript): How to scroll to selected element by class

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related