javascript - 如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部
问题描述
我的页面中有一个滚动条部分(嵌套),我想通过单击按钮将滚动条发送到其部分的底部,但我无法对内部滚动条执行任何操作。我几乎尝试了所有方法,但他们移动了主窗口滚动条。帮我解决这个问题。
以下是示例代码(仅供参考)
<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)});
更多信息:单击按钮时,我想将滚动条发送到段落
这个滚动条是嵌套的,这意味着我想在子滚动条而不是主窗口滚动条中移动
解决方案
我更新了您的部分代码,它开始正常工作:
<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
推荐阅读
- sql - SQL 问题:如何找到始终映射到另一个表中的“真实”字段的 ID 计数
- c# - 输入字符串的格式不正确?
- java - 如何在java中将对象响应映射到另一个ObjectDto
- c# - 使用 VB.NET 表单从 SQL Server 到 Excel 的日期数据检索
- react-native - 如何在本机反应中重置嵌套导航器中的导航堆栈状态
- r - 如何在R编程中将数据动态输入矩阵
- heroku - 如何修复 Multer-Gridfs-Storage 错误“创建存储引擎时出错。必须提供至少一个 url 或 db 选项”?
- python - 使用 Spyder 4.1.4 和 python 3.8 进行正确的验证循环
- python - Python:使用 xlrd 库从 excel 电子表格中读取数据给了我不正确的行数
- json - 使用 Scala 在 Spark 中将 JSON 对象更改为 JSON 列表