在現代的網站中，滾動是一個不可避免的需求。在PC端中，我們可以使用Vue框架輕松地實現一個兼容性良好、性能優異的滾動功能。

首先，我們需要在HTML中定義一個滾動容器。這個容器可以是一個div，需要設置一個固定的寬度和高度，并且要開啟overflow屬性，比如：

<div class="scroll-container" style="width: 600px; height: 400px; overflow: auto;">
<!-- 內容 -->
</div>

接下來，在Vue實例中，我們需要定義一個數據屬性來保存滾動容器的狀態，比如scrollTop和scrollHeight：

new Vue({
data: {
scrollTop: 0,
scrollHeight: 0
}
})

然后，在滾動容器中，我們需要使用@scroll事件來監聽滾動事件，更新Vue實例中的scrollTop和scrollHeight屬性：

<div class="scroll-container" 
style="width: 600px; height: 400px; overflow: auto;" 
@scroll="scrollTop = $event.target.scrollTop; scrollHeight = $event.target.scrollHeight">
<!-- 內容 -->
</div>

接下來，我們可以使用Vue的計算屬性來計算當前滾動位置占總體滾動范圍的百分比：

new Vue({
data: {
scrollTop: 0,
scrollHeight: 0
},
computed: {
scrollPercentage() {
return this.scrollHeight >0 ? this.scrollTop / (this.scrollHeight - this.$el.clientHeight) * 100 : 0;
}
}
})

最后，在滾動容器中，我們可以使用Vue的v-bind指令，將計算屬性綁定到滾動容器上，實現滾動條的位置自動跟隨滾動位置變化：

<div class="scroll-container" 
style="width: 600px; height: 400px; overflow: auto;" 
@scroll="scrollTop = $event.target.scrollTop; scrollHeight = $event.target.scrollHeight"
:style="{ 'scroll-behavior': 'auto', 'scroll-top': (scrollHeight - $el.clientHeight) * scrollPercentage / 100 + 'px' }">
<!-- 內容 -->
</div>

這里，我們使用了inline style來動態地計算滾動條的位置。其中，scroll-behavior屬性設置為auto，可以防止在滾動位置被設置時發生滾動平滑過渡的效果。

通過這種方式，我們就可以在Vue中輕松地實現一個兼容性良好、性能優異的滾動功能。同時，我們也可以通過調整樣式和修改JS代碼，在個性化定制上獲得更多的可能性。