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

【问题标题】：How to ScrollDown nested scroll bar to the bottom of the nested scroll div on button click in Angular如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部
【发布时间】：2018-09-12 19:19:01
【问题描述】：

我的页面中有一个滚动条部分（嵌套），我想通过单击按钮将滚动条发送到其部分的底部，但我无法对内部滚动条执行任何操作。我几乎尝试了所有方法，但它们移动了主窗口滚动条。帮我解决这个问题。

以下是示例代码（仅供参考）

<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>

P.S: SomeFunction() 方法包括将滚动条发送到页面底部的所有代码。编辑：我尝试过的所有方法

//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)});

更多信息：单击按钮时，我想将滚动条发送到段落

此滚动条是嵌套的，这意味着我想在子滚动条而不是主窗口滚动条中进行移动

【问题讨论】：

请展示您已经尝试过的内容
我已经添加了我尝试过的方法，请再次参考问题。
请进一步明确您的需求。通过图片、html或简单的解释等方式
点击按钮我想将滚动条移动到
标签或页面底部（因为 p 标签在底部），请再次检查问题以获取更多信息。注意：我想移动子滚动条而不是窗口滚动条（主）。
ok.. 使用代替按钮

标签： javascript html angular scroll nested

【解决方案1】：

我更新了您的部分代码，它开始正常工作：

<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>

在您的打字稿文件中添加以下功能：

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

对代码的更改：

在 P 元素之前添加了 div 并将其 ID 设为 bottomPara。
将该对象传递给按钮元素中的 someFunction 方法。
调用传入输入的scrollIntoView方法。

希望这对你有用。这是 plunker 链接：https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview

【讨论】：

嘿 Vikram 感谢您的解决方案，并对我在问题中显示的不完整代码感到抱歉。我看到了您的 plunker 代码及其正常工作，但对于窗口滚动条（即主滚动条），在我的情况下，我有子滚动条（即主窗口内的小滚动条）。我想在那个小的滚动条 div 部分内移动。
嗨@RoshanSingh，我更新了我的plunker。现在我有两个滚动条： 1. 主滚动条 2. 主 div 内的小滚动条。单击按钮时，小滚动条向下滚动到内部滚动条的底部。请检查是否有帮助：next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview

【解决方案2】：

看看这个。它可以通过html简单地完成。您必须指定 div 高度和溢出才能滚动，这是一个示例。这是我从您的问题中理解的基本示例

<!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>

【讨论】：

嗨，Adesh，感谢您抽出宝贵时间。您的答案是正确的，但对于主窗口滚动条。我想将子滚动条移动到底部或特定的 id。
只需在 div 外部单击并滚动它将滚动主窗口然后.. 例如在我给出的 sn-p 中，在 div 和主窗口滚动条之间滚动，然后主页滚动条将起作用
非常感谢，这可行，但如果我想滚动到仅在单击按钮后出现的元素。在这种情况下将无法获得该元素的 id。
如果你想去下一个元素，那么你可以按照同样的方法。如果内容很大，则滚动可见，否则元素可见
是否能够获取单击按钮后出现的元素的ID（在ngIf上）？在单击按钮之前它将被隐藏。