Как прокрутить вложенную полосу прокрутки до нижней части вложенного div прокрутки при нажатии кнопки в 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>

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

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

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

пожалуйста, покажите, что вы еще пробовали

Adesh Kumar 10.09.2018 07:22

Я добавил методы, которые я пробовал. Задайте вопрос еще раз.

Roshan Singh 10.09.2018 07:50

пожалуйста, уточните, что вам нужно больше. либо изображениями, html, либо простыми объяснениями и т. д.

Adesh Kumar 10.09.2018 07:53

При нажатии кнопки я хочу переместить полосу прокрутки к тегу <p> или внизу страницы (поскольку тег p находится внизу), пожалуйста, проверьте вопрос еще раз для получения дополнительной информации. Примечание: я хочу переместить дочернюю полосу прокрутки, а не полосу прокрутки окна (основная).

Roshan Singh 10.09.2018 08:05

хорошо .. используйте <a href="#id_to_which_you_want_to_move"> вместо кнопки

Adesh Kumar 10.09.2018 08:06

вы хотите прокрутить свою страницу до этой позиции ???

Adesh Kumar 10.09.2018 08:07

да, но не на главной странице. я хочу прокрутить в этом конкретном div (id = "scrollDiv"). Я надеюсь, вы уловили то, что я пытаюсь сказать.

Roshan Singh 10.09.2018 08:12

при использовании href моя страница перезагружается (обновляется).

Roshan Singh 10.09.2018 08:14
0
8
423
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

<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 в элементе кнопки.
  3. Вызов метода scrollIntoView переданного ввода.

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

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

Roshan Singh 10.09.2018 08:55

Привет, @RoshanSingh, я обновил свой плункер. Теперь у меня есть две полосы прокрутки: 1. Основная полоса прокрутки 2. Маленькая полоса прокрутки внутри основного div. Когда вы нажимаете кнопку, маленькая полоса прокрутки прокручивается вниз до нижней части внутренней полосы прокрутки. Пожалуйста, проверьте, помогает ли это: next.plnkr.co/edit/rM2v06dxN9vDKhrb?preview

Vikram kumar Chhajer 11.09.2018 07:18

посмотри на это хоть раз. Это можно сделать просто с помощью 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>

привет, Адеш, спасибо за уделенное время. ваш ответ правильный, но для полосы прокрутки главного окна. Я хочу переместить дочернюю полосу прокрутки вниз или к определенному идентификатору.

Roshan Singh 10.09.2018 09:00

просто щелкните за пределами div и прокрутите его, затем прокрутите главное окно ... например, в приведенном мной фрагменте прокрутите между прокрутками div и главного окна, тогда прокрутка главной страницы будет работать

Adesh Kumar 10.09.2018 09:08

Большое спасибо, это работает, но если я хочу перейти к элементу, который появляется только после нажатия кнопки. в этом случае <a href> не получит идентификатор этого элемента.

Roshan Singh 10.09.2018 09:30

если вы хотите перейти к следующему элементу, вы можете сделать то же самое. если контент большой, будет видна прокрутка, иначе элемент будет виден

Adesh Kumar 10.09.2018 09:38

сможет ли он получить идентификатор элемента, который появляется после нажатия кнопки (на ngIf)? до того, как кнопка будет нажата, она будет скрыта.

Roshan Singh 10.09.2018 10:20

мой ответ вас не удовлетворяет

Adesh Kumar 11.09.2018 10:44

да, это удовлетворительно.

Roshan Singh 11.09.2018 12:50

Я сделал это, но он не будет отображаться публично из-за политики переполнения стека, когда они не позволяют пользователю с репутацией менее n голосовать за.

Roshan Singh 12.09.2018 13:13

Другие вопросы по теме