Scrolling text inside div container not visible

Question

I have a div with inside some phrase example:

<div class="container">
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc active">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
</div>
<button class="btn">Move</button>

when i click on the button i want move the scroll on the active phrase, i use this code

this.el.nativeElement.querySelector('.phrase-doc.active').scrollIntoView();

and work good only if the container it's visible on the page, but if the container it's not visible, the page scroll move on it, i want the page scroll stay in the same position and only the scroll inside container move on the active phrase and the container should not scroll into view if it is not visible.

Looks like a duplicate to [ScrollIntoView() causing the whole page to move](https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376) to me and being answered by this [answer](https://stackoverflow.com/a/52835382/1960455)? Please give some feedback whether this is true or not (if not explain in the question why this does not work), otherwise, I'll close it as duplicate later. — t.niese, Sep 30 '21 at 08:04
I just check the solution shown in that answer and it works according to your description. If you think that this isn't true and thus not a duplicate you have to explain why you think that this is the case. — t.niese, Sep 30 '21 at 08:12
@t.niese i dont find and good solution on your link when i click the button the whole page scroll — corsaro, Sep 30 '21 at 08:23
The solution I linked as [**answer**](https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/52835382#52835382) works for me in this [fiddle](https://jsfiddle.net/c1jk74er/). If this does not work for you you need to explain in which browser it does not work and how it behaves differently from what you want. In the fiddle only the contents of the `div` is scrolling and not the page. — t.niese, Sep 30 '21 at 08:27
@t.niese the problem is in which position is the button is is in top and the container text it s in the bottom doesn't work see this example https://jsfiddle.net/9r4q576b/ — corsaro, Sep 30 '21 at 08:44
Ok but that's a crucial piece of information missing in the question. You should have said that the container should not scroll into view if it is not visible. Please [edit] your question to add that information. — t.niese, Sep 30 '21 at 08:51

score 1 · Answer 1 · answered Sep 30 '21 at 09:03

and the container should not scroll into view if it is not visible.

This is problematic because there is no API that supports that. The aim of scrollIntoView is to make that content visible.

What you could do is to get the scroll position of each scrollable ascendants save their value and after the scrollIntoView call restore those.

The drawback of that is that you can use smooth scrolling for the scrollable ascendants (if that is a requirement) and scrollIntoView (or at least not without additional work).

document.querySelector('.btn').addEventListener('click', () => {

  // here you should check all ascendants of `container` that a scrollable
  // instead of doing that only for window
  const {
    scrollX,
    scrollY
  } = window
  
  document.querySelector('.phrase-doc.active').scrollIntoView({
    block: 'nearest',
    inline: 'start'
  });
  
  // here you should restore the scroll for all the found elements and not only window
  window.scroll(scrollX, scrollY)
})

.pre {
  height: 100vh;
}

.container {
  overflow: auto;
  height: 20px;
}

.post {
  height: 200vh;
}

<button class="btn">Move</button>
<div class="pre">

</div>
<div class="container">
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc active">1Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
</div>
<div class="post">

</div>

thanks this work good, but if you try to add the height: 50px; on container, when you click the button the phrase stay on the bottom of the container . it is possible to have the phrase on the top of the container? — corsaro, Sep 30 '21 at 09:47

score 0 · Answer 2 · answered Sep 30 '21 at 09:22

0

You have to dom tag active.

document.querySelector('.btn').addEventListener('click',function (){
    var eleActive = document.querySelector('.phrase-doc.active')
    eleActive.scrollIntoView()
})

answered Sep 30 '21 at 09:22

SonHo

1

Scrolling text inside div container not visible

2 Answers2