How to ScrollDown nested scroll bar to the bottom

2019-06-11 07:17发布

站内问答 / JavaScript
678 2 5

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() method includes all the code to send the scrollbar to the bottom of the page. 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

2条回答
ゆ 、 Hurt°
2楼-- · 2019-06-11 07:43

look at this once. It can be done by html simply. You have to specify the div height and overflow to scroll and here is the a example. 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>

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
3楼-- · 2019-06-11 07:44

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:

  1. Added div before P element and gave it ID as bottomPara.
  2. passing that object to your someFunction method in button element.
  3. Calling scrollIntoView method of passed input.

Hope this works for you. Here is the plunker link: https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)