Как ScrollDown вложенной полосы прокрутки в нижней части вложенного прокрутки div при нажатии кнопки в Angular - PullRequest
Новая
       6

Как ScrollDown вложенной полосы прокрутки в нижней части вложенного прокрутки div при нажатии кнопки в Angular

0 голосов
/ 10 сентября 2018

У меня есть одна секция полосы прокрутки (вложенная) на моей странице, я хочу отправить полосу прокрутки внизу ее раздела одним нажатием кнопки, но я не могу ничего сделать с внутренней полосой прокрутки. Я попробовал почти все методы, но они перемещают полосу прокрутки главного окна. Помогите мне в решении этой проблемы.

Ниже приведен пример кода (только для справки) 

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

Подробнее: при нажатии кнопки я хочу отправить на полосу прокрутки к абзацу

Эта полоса прокрутки является вложенной, что означает, что я хочу выполнять перемещение в дочерней полосе прокрутки, а не в полосе прокрутки главного окна

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

посмотрите на это один раз. Это может быть сделано с помощью 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>
0 голосов
/ 10 сентября 2018

Я обновил некоторую часть вашего кода, и он начал работать нормально: 

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

Изменения в вашем коде:

  1. Добавил div перед элементом P и присвоил ему идентификатор в качестве bottomPara.
  2. передача этого объекта в метод someFunction в элементе button.
  3. Вызов метода scrollIntoView для пропущенного ввода.

Надеюсь, это работает для вас. Вот ссылка на плункер: https://next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview

...