一、el-scrollbar和瀏覽器原生滾動條一起出現

問題描述

el-scrollbar組件主要用于替換瀏覽器原生導航條。如下圖所示，使用el-scrollbar組件后，發現未能成功替換掉瀏覽器原生導航條，二者同時出現。

引發原因

el-scrollbar的height屬性如果不設置，則會根據父容器高度自適應。父容器是一個id為app的div，從控制臺中發現，父容器div的高度被填充到了 3000px，而當前視口的最大高度(100vh)為 920px，所以同時顯示出了el-scrollbar和瀏覽器的原生導航條。

解決方法

給el-scrollbar設置高度height="100vh"。

<template><el-scrollbar height="100vh"><router-view /></el-scrollbar>
</template>

二、使用el-scrollbar后el-backtop不顯示的問題

問題描述

el-backtop組件是一個返回頁面頂部的操作按鈕。讓頁面向下滾動，直到底部都沒有顯示返回頂部按鈕，去掉el-scrollbar后發現返回頂部按鈕可以正常顯示、使用及隱藏。

引發原因

el-backtop的target屬性用于設置觸發滾動的對象，默認是document.documentElement對象。使用el-scrollbar后，由于替換了瀏覽器原生導航條，所以監聽不到document.documentElement對象發生滾動，應該修改為監聽el-scrollbar滾動。

解決方法

給el-backtop設置滾動對象target=".el-scrollbar__wrap"。

<el-backtop target=".el-scrollbar__wrap" :right="60" :bottom="60"><div class="icon-backtop">🔝</div>
</el-backtop>

三、使用el-anchor后滑動滾動條無法監聽錨點變化

問題描述
el-anchor組件是錨點導航欄，用于頁面內容定位。如下圖所示，讓頁面向下滾動，發現錨點不會隨著頁面內容的改變而進行切換。

引發原因

el-anchor監聽滾動的容器默認值為 ‘—’，應該設置為el-scrollbar，監聽滾動條滾動。

解決方法

給el-anchor設置滾動容器container=".el-scrollbar__wrap"。

<el-anchor:marker="false"ref="anchorRef"direction="horizontal"container=".el-scrollbar__wrap"
><el-anchor-link>...</el-anchor-link>
</el-anchor>