如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部

Question

I have one scrollbar section(Nested) in my page ,i want to send scrollbar to the bottom of its section a button click but i am unable to do anything with the inner scrollbar. 我的页面中有一个滚动条部分（嵌套），我想通过单击按钮将滚动条发送到其部分底部，但是我无法对内部滚动条做任何事情。 I tried almost every method but they move the main window scroll bar. 我尝试了几乎所有方法，但是它们移动了主窗口滚动条。 Help me in solving this. 帮助我解决这个问题。

Below is the sample code(Only for Reference) 下面是示例代码（仅供参考）

<div class="scroll-box" id="scrollDiv">
<button (click)="SomeFunction()"> click here to navigate to bottom </button>
<h1> hello </h1>
<h1> Hi</h1> 
<h1> hello </h1> 
<h1> Hi</h1>
<p id="content"> BOTTOM </p>
</div>

PS: SomeFunction() method includes all the code to send the scrollbar to the bottom of the page. PS：SomeFunction（）方法包含将滚动条发送到页面底部的所有代码。 Edit: All methods i tried 编辑：我尝试过的所有方法

//var elmnt = document.getElementById("scrollDiv");
//var EsignHeight = elmnt.scrollHeight;
//var contentHeight = document.getElementById('scrollDiv').clientHeight;
//window.parent.scrollTo(0,100);
//window.parent.scroll({ left: 0, top: 500, behavior: 'smooth' });
//this.content.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
//this.scrollObject.target.scrollTop = -100;
//var newEsignHeight=-EsignHeight;
//window.scrollTo(0,document.querySelector("#container").scrollHeight);
//$("elmnt").scrollTop(100);
//   console.log("prining offset");
//var Content=document.getElementById(content);
//var topPos = Content.offsetTop;
//document.getElementById(scrollDiv).scrollTop = topPos;
//document.getElementById('scrollDiv').scrollTop = topPos-100;
//   console.log("offsetTop 1:",elmnt.offsetTop);
//   var tempScrollDiv= document.getElementById('scrollDiv');
//   console.log("offsetTop 1:",tempScrollDiv.offsetTop);
//   //tempScrollDiv.scrollTop=0;
//   //var topPos= elmnt.offsetTop;
//  // tempScrollDiv.scrollTop=topPos-elmnt.offsetTop;
//   console.log("offsetTop 2:",elmnt.offsetTop);
//   //$(tempScrollDiv).animate({scrollTop:$(tempScrollDiv).scrollTop() + ($('content').offset().top-$(tempScrollDiv).offset().top)});

More Info: On click of button i want send to scroll bar to the paragraph 更多信息：单击按钮后，我要发送至该段落的滚动条

This Scrollbar is Nested that means i want to do movement in the child scroll bar not the main window scroll bar 此滚动条是嵌套的，这意味着我想在子滚动条中而不是在主窗口滚动条中移动

Answer 1

I updated some part of your code and it started working fine: 我更新了部分代码，它开始正常运行：

<div class="scroll-box" id="scrollDiv">
    <button (click)="someFunction(bottomPara)"> click here to navigate to bottom </button>
    <h1> hello </h1>
    <h1> Hi</h1> 
    <h1> hello </h1> 
    <h1> Hi</h1>
    <div #bottomPara>
        <p id="content"> BOTTOM </p>
    </div>
</div>

In your typescript file add following function: 在您的打字稿文件中添加以下功能：

someFunction(bottomPara){
    bottomPara.scrollIntoView();
}

Changes to your code: 更改您的代码：

Added div before P element and gave it ID as bottomPara. 在P元素之前添加了div，并将其ID设置为bottomPara。
passing that object to your someFunction method in button element. 将该对象传递给button元素中的someFunction方法。
Calling scrollIntoView method of passed input. 调用传递的输入的scrollIntoView方法。

Hope this works for you. 希望这对您有用。 Here is the plunker link: https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview 这是插件链接： https ://next.plnkr.co/edit/rM2v06dxN9vDKhrb ? preview

Answer 2

look at this once. 看看这个一次。 It can be done by html simply. 可以简单地通过html完成。 You have to specify the div height and overflow to scroll and here is the a example. 您必须指定div的高度和溢出才能滚动，这是一个示例。 Its the basic example what I understand from your question 这是我从您的问题中了解的基本示例

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <div style="background-color:red; overflow:scroll;height:500px;" > <a href="#bottom">Clock to go to bottom of div</a> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p><p id="bottom">This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </div> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-09-10 06:35:18

解决方案2
0 2018-09-10 06:52:14

如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-09-10 06:35:18

解决方案2 0 2018-09-10 06:52:14

解决方案1
0 已采纳 2018-09-10 06:35:18

解决方案2
0 2018-09-10 06:52:14