ScrollIntoView causing the whole page to move

Question

I am using ScrollIntoView   to scroll the highlighted item in a list into view  When I scroll downwards ScrollIntoView false  works perfectly  But when I scroll upwards  ScrollIntoView true  is causing the whole page to move a little which I think is intended   Is there a way to avoid the whole page move when using ScrollIntoView true    Here is the structure of my page -   listOfDivs     position fixed    top 100px    width  300px    height  300px    overflow-y  scroll      lt div  container  gt       lt div  content  gt             lt div id  listOfDivs  gt                 lt div id  item1  gt   lt  div gt                lt div id  item2  gt   lt  div gt                lt div id  itemn  gt   lt  div gt            lt  div gt       lt  div gt   lt  div gt    listOfDivs is coming from ajax call  Using mobile safari   Thanks for your help in advance

User · Answer

i had the same problem  i fixed it by removing the transform translateY CSS i placed on the footer of the page

User · Answer

I ve added a way to display the imporper behavior of the ScrollIntoView -   http   jsfiddle net LEqjm 258   it should be a comment but I don t have enough reputation      ul   click function         var target   document getElementById  target    if      scrollTop   attr  checked          target parentNode scrollTop   target offsetTop        else           target scrollIntoView  0

User · Answer

in my context  he would push the sticky toolbar off the screen  or enter next to a fab button with absolute   using the nearest solved   const element   this element nativeElement  const table   element querySelector   table-container    table scrollIntoView     behavior   smooth   block   nearest

User · Answer

You could use scrollTop instead of scrollIntoView     var target   document getElementById  target    target parentNode scrollTop   target offsetTop    jsFiddle  http   jsfiddle net LEqjm   If there s more than one scrollable element that you want to scroll  you ll need to change the scrollTop of each one individually  based on the offsetTops of the intervening elements   This should give you the fine-grained control to avoid the problem you re having   EDIT  offsetTop isn t necessarily relative to the parent element - it s relative to the first positioned ancestor   If the parent element isn t positioned  relative  absolute or fixed   you may need to change the second line to   target parentNode scrollTop   target offsetTop - target parentNode offsetTop

User · Answer

Using Brilliant s idea  here s a solution that only  vertically  scrolls if the element is NOT currently visible  The idea is to get the bounding box of the viewport and the element to be displayed in browser-window coordinate space  Check if it s visible and if not  scroll by the required distance so the element is shown at the top or bottom of the viewport       function ensure visible element id                   adjust these two to match your HTML hierarchy         var element to show    document getElementById element id           var scrolling parent   element to show parentElement           var top   parseInt scrolling parent getBoundingClientRect   top           var bot   parseInt scrolling parent getBoundingClientRect   bottom            var now top   parseInt element to show getBoundingClientRect   top           var now bot   parseInt element to show getBoundingClientRect   bottom               console log  Element    now top      now bot    Viewport   top      bot              var scroll by   0          if now top  lt  top              scroll by   - top - now top           else if now bot  gt  bot              scroll by   now bot - bot          if scroll by    0                        scrolling parent scrollTop    scroll by     tr offsetTop

User · Answer

Fixed it with   element scrollIntoView   behavior   smooth   block   nearest   inline   start       see  https   developer mozilla org en-US docs Web API Element scrollIntoView

User · Answer

Just to add an answer as per my latest experience and working on VueJs  I found below piece of code ad best  which does not impact your application in anyways  const el   this  el getElementsByClassName  your element class   0   if  el       scrollIntoView el                                             block   nearest                          inline   start                          behavior   smooth                          boundary  document getElementsByClassName  main app class   0                                  main app class is the root class your element class is the element view where you can to scroll into And for browser which does not support ScrollIntoView   just use below library its awesome https   www npmjs com package scroll-into-view-if-needed

User · Answer

Adding more information to  Jesco post    Element scrollIntoViewIfNeeded   non-standard WebKit method for Chrome  Opera  Safari browsers  If the element is already within the visible area of the browser window  then no scrolling takes place  Element scrollIntoView   method scrolls the element on which it s called into the visible area of the browser window    Try the below code in mozilla org scrollIntoView   link  Post to identify Browser  var xpath         id  Notes     ScrollToElement xpath    function ScrollToElement xpath        var ele    x xpath  0       console log  ele         var isChrome     window chrome  amp  amp     window chrome webstore      window chrome runtime       if  isChrome       Chrome         ele scrollIntoViewIfNeeded          else           var inlineCenter     behavior   smooth   block   center   inline   start             ele scrollIntoView inlineCenter

User · Answer

var el   document querySelector  yourElement    window scroll  top  el offsetTop  behavior   smooth

User · Answer

jQuery plugin scrollintoview   increases usability  Instead of default DOM implementation you can use a plugin that animates movement and doesn t have any unwanted effects  Here s the simplest way of using it with defaults      yourTargetLiSelector   scrollintoview      Anyway head over to this blog post where you can read all the details and will eventually get you to GitHub source codeof the plugin   This plugin automatically searches for the closest scrollable ancestor element and scrolls it so that selected element is inside its visible view port  If the element is already in the view port it doesn t do anything of course

User · Answer

I had this problem too  and spent many hours trying to deal with it  I hope my resolution may still help some people   My fix ended up being    For Chrome  changing  scrollIntoView   to  scrollIntoView  block   nearest     thanks to  jfrohn   For Firefox  apply overflow  -moz-hidden-unscrollable  on the container element that shifts  Not tested in other browsers

User · Answer

Play around with scrollIntoViewIfNeeded       make sure it s supported by the browser

[javascript] ScrollIntoView() causing the whole page to move

Examples related to javascript

Examples related to css