Using scrollIntoView() in Scrollbar instance(在Scrollbar实例中使用scrollIntoView())
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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
