কৌণিক 2 নীচে স্ক্রোল করুন (চ্যাট শৈলী)

Question

আমার একটি ng-forলুপের মধ্যে একক সেল উপাদানগুলির একটি সেট রয়েছে ।

আমার সব জায়গায় জায়গা আছে তবে আমি সঠিকটি খুঁজে বের করতে পারি না

বর্তমানে আমি আছে

setTimeout(() => {
  scrollToBottom();
});

চিত্রগুলি ভিউপোর্টটি নীচে সন্নিবেশিত করায় এটি সমস্ত সময় কাজ করে না।

অ্যাঙ্গুলার 2 এ চ্যাট উইন্ডোর নীচে স্ক্রোল করার উপযুক্ত উপায়টি কী?

Answer 1

আমার একই সমস্যা ছিল, আমি একটি AfterViewCheckedএবং ব্যবহার করছি@ViewChild সংমিশ্রণটি (Angular2 beta.3)।

উপাদান:

import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngOnInit() { 
        this.scrollToBottom();
    }

    ngAfterViewChecked() {        
        this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }                 
    }
}

টেমপ্লেট:

<div #scrollMe style="overflow: scroll; height: xyz;">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

অবশ্যই এটি বেশ মৌলিক। AfterViewCheckedপ্রত্যেক সময় দৃশ্য চেক করা হয় আরম্ভ করে:

আপনার উপাদানগুলির দৃশ্যের প্রতিটি চেকের পরে বিজ্ঞপ্তি পেতে এই ইন্টারফেসটি প্রয়োগ করুন।

উদাহরণস্বরূপ বার্তাগুলি প্রেরণের জন্য যদি আপনার কাছে একটি ইনপুট-ফিল্ড থাকে তবে প্রতিটি ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় (কেবল উদাহরণ দেওয়ার জন্য)। তবে ব্যবহারকারী যদি নিজে স্ক্রল করে কিনা এবং আপনি যদি সংরক্ষণ করেন তবে ঠিকঠাক হওয়া scrollToBottom()উচিত।

Comments

আমার একটি হোম উপাদান রয়েছে, হোম টেমপ্লেটে আমার ডিভের আরও একটি উপাদান রয়েছে যা ডেটা দেখায় এবং ডেটা সংযোজন করে রাখে তবে স্ক্রোল বার সিএসএস অভ্যন্তরীণ টেম্পলেটটিতে নয় হোম টেম্পলেট ডিভিতে থাকে। সমস্যাটি হ'ল এই স্ক্রোলটিবোটমকে কল করা হচ্ছে প্রতিটি ডাটা উপাদানগুলির অভ্যন্তরে আসে তবে # স্ক্রোলমে হোম উপাদান রয়েছে যেহেতু সেই ডিভ স্ক্রোলযোগ্য ... এবং # স্ক্রোলমে অভ্যন্তর উপাদান থেকে অ্যাক্সেসযোগ্য নয় .. কীভাবে অভ্যন্তর থেকে # স্ক্রোলমে ব্যবহার করবেন তা নিশ্চিত নয়

— আনাগ ভার্মা

আপনার সমাধান, @ বাসিত, সুন্দরভাবে সরল এবং অন্তহীন স্ক্রোলগুলি ফায়ারিংয়ের শেষ হয় না / যখন ব্যবহারকারী ম্যানুয়ালি স্ক্রোল করে তার জন্য কোনও কাজের প্রয়োজন নেই।

— থিওরেডি

হাই, ব্যবহারকারী যখন স্ক্রোল আপ করবেন তখন কী কোনও উপায় আছে?

— জন লুই ডেলা ক্রুজ

আমি এটি একটি চ্যাট শৈলীর পদ্ধতির মধ্যেও ব্যবহার করার চেষ্টা করছি, তবে ব্যবহারকারী যদি স্ক্রোল করে তবে স্ক্রোল করা দরকার না। আমি সন্ধান করেছি এবং ব্যবহারকারীর স্ক্রোল আপ হয়েছে কিনা তা সনাক্ত করার কোনও উপায় খুঁজে পাচ্ছি না। একটি সতর্কতা হ'ল এই চ্যাট উপাদানটি বেশিরভাগ সময় পূর্ণ পর্দা নয় এবং এর নিজস্ব স্ক্রোল বার রয়েছে।

— হার্ভপ

@ হার্ভপি এবং জনলুইডেলা ক্রুজ আপনি যদি ব্যবহারকারী ম্যানুয়ালি স্ক্রোল করে থাকেন তবে আপনি কী স্ক্রোল এড়িয়ে যাওয়ার কোনও সমাধান খুঁজে পেয়েছেন?

— suhailvs

Answer 2

এর সহজতম এবং সর্বোত্তম সমাধানটি হ'ল:

এই #scrollMe [scrollTop]="scrollMe.scrollHeight"সহজ জিনিসটি টেমপ্লেটের পাশে যুক্ত করুন

<div style="overflow: scroll; height: xyz;" #scrollMe [scrollTop]="scrollMe.scrollHeight">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

---

ওয়ার্কিং ডেমো (ডামি চ্যাট অ্যাপ সহ) এবং সম্পূর্ণ কোডের লিঙ্কটি এখানে

অ্যাঙ্গুলার 2 এর সাথে এবং 5 অবধিও কাজ করবে, যেমন উপরের ডেমোটি অ্যাঙ্গুলার 5 এ করা হয়।

---

বিঃদ্রঃ :

ত্রুটির জন্য: ExpressionChangedAfterItHasBeenCheckedError

আপনার CSS দয়া করে চেক করুন, এটা CSS পাশ একটি ইস্যু, না কৌণিক পাশ, ব্যবহারকারী @KHAN এক সমাধান করেছে যে সরিয়ে এর overflow:auto; height: 100%;থেকে div। (বিস্তারিত জানার জন্য কথোপকথন পরীক্ষা করুন)

Comments

এবং আপনি কীভাবে স্ক্রোলটি ট্রিগার করবেন?

— বুর্জুয়া

এটি এনজিফর আইটেমটিতে যুক্ত হওয়া যে কোনও আইটেমের নীচে অটস্ক্রোল করবে বা যখন অভ্যন্তরের দিকের ডিভের উচ্চতা বৃদ্ধি পাবে

— বিবেক দোশি

থেক্স @ ভিভেকডোশি। যদিও কিছু যুক্ত হওয়ার পরেও আমি এই ত্রুটিটি পেয়েছি:> ত্রুটি ত্রুটি: এক্সপ্রেশনচেন্জড আফটারআইটাসহিনবাইন চেকডএরর: এটি যাচাই করার পরে অভিব্যক্তিটি পরিবর্তন হয়েছে। পূর্ববর্তী মান: '700'। বর্তমান মান: '517'।

— ভাসিলিস পিটস

@csharpnewbie আমি তালিকা থেকে কোনো বার্তা সরানোর একই সমস্যা আছে: Expression has changed after it was checked. Previous value: 'scrollTop: 1758'. Current value: 'scrollTop: 1734'। আপনি কি সমাধান করেছেন?

— আন্দ্রে

আমি "এক্সপ্রেশন এটি পরীক্ষা করার পরে পরিবর্তিত হয়েছে" (উচ্চতা: 100%; ওভারফ্লো-ওয়াই: স্ক্রোল) সমাধান করতে সক্ষম হয়েছি [স্ক্রোলটপ] এ একটি শর্ত যুক্ত করে এটি সেট করা থেকে রোধ করতে আমার অবধি ডেটা পপুলেশন করার ব্যবস্থা ছিল এটি সহ, উদাহরণস্বরূপ: <ul শ্রেণী = "চ্যাট-ইতিহাস" #chatHistory [স্ক্রোলটপ] = "বার্তা.সৌধিকতা === 0? 0: chatHistory.scrolHeight"> <li * ngFor = "বার্তাগুলির বার্তা দিন"> .. "" ম্যাসেজ.সৌধিকতা === 0? 0 "চেকটি যোগ করার পরে সমস্যাটি ঠিক হয়ে গেছে বলে মনে হয়েছে, যদিও আমি কেন তা ব্যাখ্যা করতে পারছি না, তাই আমি নিশ্চিতভাবে বলতে পারি না যে এই সমাধানটি আমার বাস্তবায়নের পক্ষে অনন্য নয়।

— বেন

Answer 3

ব্যবহারকারী স্ক্রোল আপ করার চেষ্টা করেছিল কিনা তা দেখার জন্য আমি একটি চেক যোগ করেছি।

কেউ চাইলে আমি এই এখানেই রেখে যাব :)

<div class="jumbotron">
    <div class="messages-box" #scrollMe (scroll)="onScroll()">
        <app-message [message]="message" [userId]="profile.userId" *ngFor="let message of messages.slice().reverse()"></app-message>
    </div>

    <textarea [(ngModel)]="newMessage" (keyup.enter)="submitMessage()"></textarea>
</div>

এবং কোড:

import { AfterViewChecked, ElementRef, ViewChild, Component, OnInit } from '@angular/core';
import {AuthService} from "../auth.service";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/concatAll';
import {Observable} from 'rxjs/Rx';

import { Router, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-messages',
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
    messages:Array<MessageModel>
    newMessage = ''
    id = ''
    conversations: Array<ConversationModel>
    profile: ViewMyProfileModel
    disableScrollDown = false

    constructor(private authService:AuthService,
                private route:ActivatedRoute,
                private router:Router,
                private conversationsApi:ConversationsApi) {
    }

    ngOnInit() {

    }

    public submitMessage() {

    }

     ngAfterViewChecked() {
        this.scrollToBottom();
    }

    private onScroll() {
        let element = this.myScrollContainer.nativeElement
        let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
        if (this.disableScrollDown && atBottom) {
            this.disableScrollDown = false
        } else {
            this.disableScrollDown = true
        }
    }


    private scrollToBottom(): void {
        if (this.disableScrollDown) {
            return
        }
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }
    }

}

Comments

কনসোলে ত্রুটি ছাড়াই সত্যিই কার্যক্ষম সমাধান। ধন্যবাদ!

— দিমিত্রি ভ্যাসিলুক Just3F

Answer 4

বার্তাগুলির মাধ্যমে স্ক্রোল করার সময় গৃহীত উত্তরগুলি ছড়িয়ে পড়ে, এটি এড়ানো যায়।

আপনি এটির মতো একটি টেম্পলেট চান।

<div #content>
  <div #messages *ngFor="let message of messages">
    {{message}}
  </div>
</div>

তারপরে আপনি পৃষ্ঠাতে যুক্ত হওয়া নতুন বার্তা উপাদানগুলির সাবস্ক্রাইব করতে একটি ভিউচিল্ডার টীকাটি ব্যবহার করতে চান।

@ViewChildren('messages') messages: QueryList<any>;
@ViewChild('content') content: ElementRef;

ngAfterViewInit() {
  this.scrollToBottom();
  this.messages.changes.subscribe(this.scrollToBottom);
}

scrollToBottom = () => {
  try {
    this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
  } catch (err) {}
}

Comments

হাই - আমি এই পদ্ধতির চেষ্টা করছি, তবে এটি সর্বদা ক্যাচ ব্লকে যায়। আমার একটি কার্ড রয়েছে এবং এর ভিতরে আমার একটি ডিভ রয়েছে যা একাধিক বার্তা প্রদর্শন করে (কার্ড ডিভের ভিতরে, আমি আপনার কাঠামোর সাথে মিল রেখেছি)। এর জন্য সিএসএস বা টিএসএস ফাইলে অন্য কোনও পরিবর্তন প্রয়োজন কিনা তা বুঝতে আপনি আমাকে সাহায্য করতে পারেন? ধন্যবাদ।

— csharpnewbie

এখন পর্যন্ত সেরা উত্তর। ধন্যবাদ!

— ক্যাগলিওস্ট্রো

এটি বর্তমানে একটি কৌণিক বাগের কারণে কাজ করে না যেখানে এনজিএফটারভিউআইনিটিতে ঘোষিত হলেও ক্যোরিলিস্ট কেবল সাবস্ক্রিপশন পরিবর্তন করে। Mert এর সমাধানটিই একমাত্র কাজ করে। কোনও উপাদান যুক্ত হওয়া বিবেচনা না করেই বিবেকের দ্রবণে আগুন জ্বলে ওঠে, যখন মের্টের নির্দিষ্ট উপাদানগুলি যুক্ত করা হয় তখনই গুলি চালানো যায়।

— জন হ্যাম

এটিই হ'ল একমাত্র উত্তর যা আমার সমস্যা সমাধান করে। কৌনিক 6

— suhailvs

অসাধারণ!!! আমি উপরেরটি ব্যবহার করেছি এবং ভেবেছিলাম এটি দুর্দান্ত ছিল তবে আমি তখন স্ক্রল করতে গিয়ে আটকে গেলাম এবং আমার ব্যবহারকারীরা পূর্ববর্তী মন্তব্যগুলি পড়তে পারেন নি! এই সমাধানের জন্য আপনাকে ধন্যবাদ! ফ্যান্টাস্টিক! আমি যদি 100 + পয়েন্ট দিতে পারতাম তবে :

— ডি

Answer 5

ব্যবহার বিবেচনা করুন

.scrollIntoView()

Https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView দেখুন

Comments

এখনও মানক নয়, আপনার যদি ক্রসব্রোজারের সামঞ্জস্যতা থাকে তবে আপনার সীমাবদ্ধতা থাকবে।

— চাভোকার্লোস

@ শ্যাভোকার্লোস - অপেরা মিনি ব্যতীত অন্য কিছুর দ্বারা সমর্থিত বলে মনে হচ্ছে: ক্যানিওজ ডটকম

— বরিস ইয়াকুবচিক

Answer 6

আপনি যদি নিশ্চিত হতে চান যে, আপনি * এনজিফোয়ার হয়ে যাওয়ার পরে শেষ পর্যন্ত স্ক্রল করছেন, আপনি এটি ব্যবহার করতে পারেন।

<div #myList>
 <div *ngFor="let item of items; let last = last">
  {{item.title}}
  {{last ? scrollToBottom() : ''}}
 </div>
</div>

scrollToBottom() {
 this.myList.nativeElement.scrollTop = this.myList.nativeElement.scrollHeight;
}

এখানে গুরুত্বপূর্ণ, "সর্বশেষ" ভেরিয়েবল সংজ্ঞা দেয় আপনি যদি বর্তমানে সর্বশেষ আইটেমে থাকেন তবে আপনি "স্ক্রোলটোবোটম" পদ্ধতিটি ট্রিগার করতে পারবেন

Comments

এই উত্তরটি গ্রহণযোগ্য উত্তর পাওয়ার যোগ্য। এটি একমাত্র সমাধান যা কাজ করে। এনজিএফটারভিউআইনিতে ঘোষিত হলেও ক্যুইরিলিস্ট কেবল সাবস্ক্রিপশন পরিবর্তন করে যেখানে অ্যাংুলার বাগের কারণে ডিনিসট্রির সমাধান কাজ করে না। কোনও উপাদান যুক্ত হওয়া বিবেচনা না করেই বিবেকের দ্রবণে আগুন জ্বলে ওঠে, যখন মের্টের নির্দিষ্ট উপাদানগুলি যুক্ত করা হয় তখনই গুলি চালানো যায়।

— জন হ্যাম

ধন্যবাদ! অন্যান্য প্রতিটি পদ্ধতির কিছুটা ডাউনসাইড থাকে। এটি ঠিক যেমনটি কাজ করে তেমন কাজ করে। আপনার কোড ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— lkaupp

Answer 7

this.contentList.nativeElement.scrollTo({left: 0 , top: this.contentList.nativeElement.scrollHeight, behavior: 'smooth'});

Comments

প্রশ্নকর্তাকে সঠিক দিক দিয়ে যাওয়া যে কোনও উত্তর সহায়ক, তবে আপনার উত্তরটিতে কোনও সীমাবদ্ধতা, অনুমান বা সরলকরণ উল্লেখ করার চেষ্টা করুন। ব্রেভিটি গ্রহণযোগ্য, তবে পূর্ণাঙ্গ ব্যাখ্যা আরও ভাল।

— Baduker

Answer 8

আমার সমাধান ভাগ করে নিচ্ছি, কারণ আমি বাকিদের সাথে পুরোপুরি সন্তুষ্ট নই। আমার সমস্যাটি AfterViewCheckedহ'ল কখনও কখনও আমি স্ক্রল করে চলেছি এবং কোনও কারণে এই লাইফ হুকটি ডেকে আনে এবং কোনও নতুন বার্তা না থাকলেও এটি আমাকে স্ক্রোল করে। আমি ব্যবহার করার চেষ্টা OnChangesকিন্তু এই একটি বিষয়, যা আমার হতে ছিল এই সমাধান। দুর্ভাগ্যক্রমে, শুধুমাত্র ব্যবহার করে DoCheck, বার্তাগুলি রেন্ডার হওয়ার আগে এটি স্ক্রোল করে যাচ্ছিল যা কার্যকর ছিল না, তাই আমি এগুলিকে সংযুক্ত করেছিলাম যাতে ডচেক মূলত নির্দেশ করছে AfterViewCheckedযে এটি কল করা উচিত কিনাscrollToBottom ।

প্রতিক্রিয়া পেয়ে খুশি।

export class ChatComponent implements DoCheck, AfterViewChecked {

    @Input() public messages: Message[] = [];
    @ViewChild('scrollable') private scrollable: ElementRef;

    private shouldScrollDown: boolean;
    private iterableDiffer;

    constructor(private iterableDiffers: IterableDiffers) {
        this.iterableDiffer = this.iterableDiffers.find([]).create(null);
    }

    ngDoCheck(): void {
        if (this.iterableDiffer.diff(this.messages)) {
            this.numberOfMessagesChanged = true;
        }
    }

    ngAfterViewChecked(): void {
        const isScrolledDown = Math.abs(this.scrollable.nativeElement.scrollHeight - this.scrollable.nativeElement.scrollTop - this.scrollable.nativeElement.clientHeight) <= 3.0;

        if (this.numberOfMessagesChanged && !isScrolledDown) {
            this.scrollToBottom();
            this.numberOfMessagesChanged = false;
        }
    }

    scrollToBottom() {
        try {
            this.scrollable.nativeElement.scrollTop = this.scrollable.nativeElement.scrollHeight;
        } catch (e) {
            console.error(e);
        }
    }

}

chat.component.html

<div class="chat-wrapper">

    <div class="chat-messages-holder" #scrollable>

        <app-chat-message *ngFor="let message of messages" [message]="message">
        </app-chat-message>

    </div>

    <div class="chat-input-holder">
        <app-chat-input (send)="onSend($event)"></app-chat-input>
    </div>

</div>

chat.component.sass

.chat-wrapper
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  height: 100%

  .chat-messages-holder
    overflow-y: scroll !important
    overflow-x: hidden
    width: 100%
    height: 100%

Comments

এটি ডিএমএমে নতুন বার্তা যুক্ত করার আগে চ্যাটটি স্ক্রোল করা হয়েছে কিনা তা যাচাই করতে ব্যবহার করা যেতে পারে: const isScrolledDown = Math.abs(this.scrollable.nativeElement.scrollHeight - this.scrollable.nativeElement.scrollTop - this.scrollable.nativeElement.clientHeight) <= 3.0;(যেখানে 3.0 পিক্সেলে সহনশীলতা রয়েছে)। এটা তোলে ব্যবহার করা যেতে পারে ngDoCheckথেকে শর্তসাপেক্ষে সেট না shouldScrollDownকরার জন্য true, তাহলে ব্যবহারকারী ম্যানুয়ালি আপ স্ক্রল করা হয়।

— রুসলান স্টেলমাচেনকো

@ রাস্লানস্টেলমাচেনকো পরামর্শের জন্য ধন্যবাদ। আমি এটি বাস্তবায়ন করেছি (আমি ngAfterViewCheckedঅন্যান্য বুলেটিনের সাথে এটি করার সিদ্ধান্ত নিয়েছি this এই বুলিয়ান ঠিক কী বোঝায় সে সম্পর্কে আমি কিছুটা পরিষ্কার shouldScrollDownকরার numberOfMessagesChangedজন্য নাম পরিবর্তন করেছি

— RTYX

আমি আপনাকে দেখছি if (this.numberOfMessagesChanged && !isScrolledDown)তবে আমার ধারণা আপনি আমার পরামর্শটির উদ্দেশ্য বুঝতে পারেন নি। আমার আসল উদ্দেশ্য হয় না স্বয়ংক্রিয়ভাবে নিচে স্ক্রল এমনকি যখন নতুন বার্তা, যোগ করা হয়, তাহলে ব্যবহারকারী ম্যানুয়ালি আপ স্ক্রল। এটি ছাড়া আপনি যদি ইতিহাসটি দেখতে স্ক্রোল করে থাকেন তবে নতুন বার্তা আসার সাথে সাথে চ্যাটটি নীচে স্ক্রোল হয়ে যাবে। এটি খুব বিরক্তিকর আচরণ হতে পারে। :) সুতরাং, আমার পরামর্শটি ছিল ডিওমে নতুন বার্তা যুক্ত হওয়ার আগে চ্যাটটি স্ক্রোল করা হয়েছে কিনা এবং অটস্ক্রোল নয়, তা যদি হয় তা পরীক্ষা করে দেখুন। ngAfterViewCheckedঅনেক দেরি হয়ে গেছে কারণ ডোম ইতিমধ্যে পরিবর্তিত হয়েছে।

— রুসলান স্টেলমাচেঙ্কো

আআআআআআআহ, আমি তখন উদ্দেশ্যটি বুঝতে পারি নি। আপনি যা বলেছিলেন তা বোঝা যায় - আমি মনে করি সেই পরিস্থিতিতে অনেকগুলি আড্ডা নীচে যাওয়ার জন্য একটি বোতাম যুক্ত করে বা একটি চিহ্ন রয়েছে যা সেখানে একটি নতুন বার্তা রয়েছে, তাই এটি অর্জনের পক্ষে এটি অবশ্যই ভাল উপায়। আমি এটি সম্পাদনা করব এবং পরে এটি পরিবর্তন করব। সাহায্য করার জন্য ধন্যবাদ!

— RTYX

আপনার ভাগ্যের জন্য godশ্বরকে ধন্যবাদ, @ মার্ট সলিউশনের সাথে, আমার দৃষ্টিভঙ্গি বিরল ক্ষেত্রে (কলকে ব্যাকএন্ড থেকে প্রত্যাখ্যান করা হবে) সমালোচনা করা হবে, আপনার IterableDiffers এর সাথে এটি দুর্দান্তভাবে কাজ করে। তোমাকে অনেক ধন্যবাদ!

— lkaupp

Answer 9

বিবেকের উত্তরটি আমার পক্ষে কাজ করেছে, তবে ত্রুটিটি যাচাই করার পরে একটি অভিব্যক্তি পরিবর্তিত হয়েছে। কোনও মন্তব্যই আমার পক্ষে কাজ করেনি, তবে আমি যা করেছি তা পরিবর্তন সনাক্তকরণের কৌশলটি পরিবর্তন করা হয়েছিল।

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

Answer 10

কৌণিক ব্যবহারে উপাদান ডিজাইন সিডেনভ ব্যবহার করে আমাকে নিম্নলিখিত ব্যবহার করতে হয়েছিল:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = val.scrollHeight;
    });

Answer 11

const element = document.getElementById('box');
element.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });

Answer 12

অন্যান্য সমাধানগুলি পড়ার পরে, আমি সবচেয়ে ভাল সমাধানটি ভাবতে পারি, সুতরাং আপনার যা প্রয়োজন তা কেবল চালিত করুন: সঠিক পরিবর্তন সনাক্ত করতে আপনি এনজিওচেনজ ব্যবহার করেন

ngOnChanges() {
  if (changes.messages) {
      let chng = changes.messages;
      let cur  = chng.currentValue;
      let prev = chng.previousValue;
      if(cur && prev) {
        // lazy load case
        if (cur[0].id != prev[0].id) {
          this.lazyLoadHappened = true;
        }
        // new message
        if (cur[cur.length -1].id != prev[prev.length -1].id) {
          this.newMessageHappened = true;
        }
      }
    }

}

এবং আপনি এনজিএফটারভিউ চেকড ব্যবহার করে বাস্তবে পরিবর্তনটি রেন্ডার করার আগে প্রয়োগ করে তবে পুরো উচ্চতা গণনার পরে

ngAfterViewChecked(): void {
    if(this.newMessageHappened) {
      this.scrollToBottom();
      this.newMessageHappened = false;
    }
    else if(this.lazyLoadHappened) {
      // keep the same scroll
      this.lazyLoadHappened = false
    }
  }

আপনি যদি ভাবছেন যে কীভাবে স্ক্রোলটোবোটম প্রয়োগ করবেন

@ViewChild('scrollWrapper') private scrollWrapper: ElementRef;
scrollToBottom(){
    try {
      this.scrollWrapper.nativeElement.scrollTop = this.scrollWrapper.nativeElement.scrollHeight;
    } catch(err) { }
  }