前景

由于VUE使用虛擬dom，導致滾動條滑動到具體元素非常生硬，在github上看到一位作者寫了不錯的方法因此記載下來分享

作者地址

傳送們

代碼

/** y: the y coordinate to scroll, 0 = top* duration: scroll duration in milliseconds; default is 0 (no transition)* element: the html element that should be scrolled ; default is the main scrolling element*/ function scrollToY (y, duration = 0, element = document.scrollingElement) {// cancel if already on target positionif (element.scrollTop === y) return;const cosParameter = (element.scrollTop - y) / 2;let scrollCount = 0, oldTimestamp = null;function step (newTimestamp) {if (oldTimestamp !== null) {// if duration is 0 scrollCount will be InfinityscrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration;if (scrollCount >= Math.PI) return element.scrollTop = y;element.scrollTop = cosParameter + y + cosParameter * Math.cos(scrollCount);}oldTimestamp = newTimestamp;window.requestAnimationFrame(step);}window.requestAnimationFrame(step); }/** duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function*/ function scrollToTop(duration = 0) {scrollToY(0, duration, document.scrollingElement); }/** id: the id of the element as a string that should be scrolled to* duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function on the main scrolling element*/ function scrollToId(id, duration = 0, customOffset = 0) {const offset = Math.round(document.getElementById(id).getBoundingClientRect().top);scrollToY(document.scrollingElement.scrollTop + offset + customOffset, duration); }/** element: the node object that should be scrolled to* duration: scroll duration in milliseconds; default is 0 (no transition)* this function is using the scrollToY function on the main scrolling element*/ function scrollToElement(element, duration = 0, customOffset = 0) {const offset = Math.round(element.getBoundingClientRect().top);scrollToY(document.scrollingElement.scrollTop + offset + customOffset, duration); }

總結

以上是生活随笔為你收集整理的总结VUE控制滚动滑动方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。