如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部 [英] How to ScrollDown nested scroll bar to the bottom of the nested scroll div on button click in Angular
问题描述
我的页面中有一个滚动条部分(嵌套),我想将滚动条发送到其部分的底部并单击按钮,但是我无法对内部滚动条做任何事情.我尝试了几乎所有方法,但它们会移动主窗口滚动条. 帮助我解决这个问题.
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>
P.S:SomeFunction()方法包含将滚动条发送到页面底部的所有代码. 我尝试过的所有方法
P.S: SomeFunction() method includes all the code to send the scrollbar to the bottom of the page. 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
此滚动条是嵌套的,这意味着我想在子滚动条中而不是在主窗口滚动条中进行移动
推荐答案
我更新了部分代码,并开始正常工作:
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();
}
更改您的代码:
- 在P元素之前添加了div,并将其ID设置为bottomPara.
- 将该对象传递给按钮元素中的someFunction方法.
- 调用传递的输入的scrollIntoView方法.
希望这对您有用. 这是插件的链接: https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview
Hope this works for you. Here is the plunker link: https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview
这篇关于如何在Angular中单击按钮时将嵌套滚动条向下滚动到嵌套滚动div的底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!