如何在Angular中單擊按鈕時將嵌套滾動條向下滾動到嵌套滾動div的底部
[英]How to ScrollDown nested scroll bar to the bottom of the nested scroll div on button click in Angular
問題描述
我的頁面中有一個滾動條部分（嵌套），我想通過單擊按鈕將滾動條發送到其部分底部，但是我無法對內部滾動條做任何事情。 我嘗試了幾乎所有方法，但是它們移動了主窗口滾動條。 幫助我解決這個問題。
下面是示例代碼（僅供參考）
<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（）方法包含將滾動條發送到頁面底部的所有代碼。 編輯：我嘗試過的所有方法
//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)});
更多信息：單擊按鈕后，我要發送至該段落的滾動條
此滾動條是嵌套的，這意味着我想在子滾動條中而不是在主窗口滾動條中移動
2 個解決方案
解決方案1
0 已采納 2018-09-10 06:35:18
我更新了部分代碼，它開始正常運行：
<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。
- 將該對象傳遞給button元素中的someFunction方法。
- 調用傳遞的輸入的scrollIntoView方法。
希望這對您有用。 這是插件鏈接： https ://next.plnkr.co/edit/rM2v06dxN9vDKhrb ? preview
解決方案2
0 2018-09-10 06:52:14
看看這個一次。 可以簡單地通過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>
如何使用 jQuery 單擊按鈕滾動到頁面底部的某個元素/div？
[英]How to scroll on click of a button to a certain element/div on the bottom of the page with jQuery?
如何在iframe中使用按鈕click / addEventListener滾動到底部
[英]How to scroll to bottom with a button click/addEventListener in an iframe
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.