Move to Div on click using Smooth Scrollbar

Question

How are you all?

I am trying to scroll on click but target div is in Smooth scrollbar.

Library for smooth scrollbar is https://github.com/idiotWu/smooth-scrollbar

I tried all the parameter relevant to this But I did not get any solution on it.

Can anyone help me please.

Thanks in advance

Answer 1

Using scrollIntoView() in Scrollbar instance

let instance = Scrollbar.init(document.getElementById("scroll"));

document.querySelector("button").addEventListener('click', function(event) {
  instance.scrollIntoView(document.getElementById("intoview"))
})

#scroll {
  height: 85vh;
  overflow: auto;
}
#intoview {
  font-weight: bold;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/7.4.0/smooth-scrollbar.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/7.4.0/smooth-scrollbar.css" rel="stylesheet" />

<div id="scroll">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis nisl eget est aliquam, quis lacinia lorem elementum. Aliquam mi libero, faucibus nec tempus nec, scelerisque a dui. Nam faucibus risus elit, ac pharetra ex faucibus quis. Maecenas
    neque augue, rutrum aliquam nisl at, tristique vulputate orci. Proin urna risus, tincidunt ut urna gravida, ultricies tincidunt tortor. Ut at lorem lacus. Donec sed scelerisque metus. Curabitur feugiat cursus arcu, sed ultrices lacus.</div>

  <div>
    Proin euismod augue eget sem faucibus fermentum. Aliquam viverra vestibulum lacus vel malesuada. Integer a vulputate purus, pretium pulvinar diam. Nulla in justo eu enim facilisis elementum sit amet vitae augue. Nam a gravida nunc. Aliquam egestas gravida
    volutpat. Aliquam semper in elit ac tristique. Integer tristique volutpat dui. Aenean in ex lacinia, volutpat odio vel, accumsan urna. Nulla vulputate enim nec risus ornare, et tincidunt metus pulvinar. Fusce porta diam eu urna semper, in egestas
    ante efficitur. Suspendisse potenti. Sed consectetur mollis pellentesque. Aliquam in tortor et velit viverra suscipit. In est lorem, facilisis ac ex id, lobortis maximus ante. Curabitur at dapibus urna.
  </div>

  <div>
    Donec sed sapien at ex ornare mollis vel nec lacus. Mauris vitae lectus efficitur, hendrerit neque sed, eleifend leo. Quisque non pretium tellus. Suspendisse commodo elementum augue, sed fringilla elit condimentum nec. Nullam lacinia, sapien in lacinia
    porttitor, leo magna vulputate lacus, sit amet cursus nibh tortor ac urna. Nullam aliquet bibendum felis, sit amet dictum velit sollicitudin et. Suspendisse euismod faucibus scelerisque. Ut interdum neque in mollis aliquet. Sed eros mi, dapibus eget
    molestie at, cursus et metus. Suspendisse laoreet semper magna elementum bibendum. Quisque at tortor congue, hendrerit odio nec, sollicitudin lectus. Nullam mollis suscipit nibh a finibus. Vestibulum luctus, magna sed tempus auctor, tellus turpis
    mollis sapien, vitae vulputate felis leo eget mauris. Sed quis felis sit amet lacus maximus feugiat. Pellentesque dictum ultricies rhoncus.
  </div>

  <div id="intoview">
    Ut id consequat metus. Phasellus quis nibh eget quam aliquam vulputate dictum vel massa. Fusce eleifend risus ligula, nec aliquam ipsum ornare ac. In mattis libero tincidunt, aliquam ante eget, commodo leo. Etiam in justo malesuada, ullamcorper velit
    accumsan, aliquet velit. Fusce a purus quam. Phasellus placerat malesuada urna, a maximus felis porta nec. Nullam ut mi sem. Sed sit amet risus ac libero ornare sollicitudin. Nulla a fringilla metus. Aenean sollicitudin dapibus congue. Sed volutpat
    tincidunt pretium. Etiam gravida a eros ac aliquam.
  </div>

  <div>
    Phasellus vel est nisi. Aenean ac mauris a elit auctor tincidunt eu id nisl. Ut eleifend, sapien sit amet euismod vestibulum, dui ipsum eleifend elit, et elementum felis arcu in enim. Mauris in scelerisque leo, et lobortis est. Maecenas ut mauris purus.
    Maecenas eu mauris nec velit viverra pretium id vitae libero. Pellentesque ac tortor quis orci blandit sagittis. Praesent iaculis, urna efficitur aliquet ultricies, velit justo malesuada ligula, suscipit porta magna lacus blandit dui.</div>
</div>

<button>Scroll</button>