技術標籤：vuecss3js

前言

在我們製作網站不止一級路由時，可能會要在子路由裡面單獨設定一個滾動條。而不是由網頁自帶的滾動條進行滑動。不然可能會出現這種效果

網頁自帶滾動條滑動

如果用網頁自帶的瀏覽器的話就是整個頁面向下滑動，如果使用者想切換到另一個子路由模組的話，就得返回頂部才能操作。
總所周知，使用者體驗是最重要的，我們為了節省這一步。是不是可以在子路由裡面給他加上一個滾動條而達到只有子路由裡面內容滾動呢？？？？

怎樣給子路由加上滾動條

overflow-x或overflow-y

給子路由加上一個id，然後給他加上樣式

	<!-- 二級路由 -->
   	<
 
router-view id="secondRoute"/>

style：

	#secondRoute:hover {
        overflow-y: auto;
    }
    
    #secondRoute {
        padding-right: 17px;
        padding-left: 3px;
        height: 70vh;
        width: 100%;
        overflow-y: hidden;
        overflow-x: hidden;
    }

這裡我設定的是當滑鼠移入子路由滾動條才出現

！！！！！一定要把app裡面的body加上overflow-y：hidden，不然將會和子路由的滾動條衝突。並且要給你的子路由加上height，不然不會顯示！！！！！

下面是效果圖

現在可以看到已經可以在子路由裡面滑動了，可以更好的點選上面的導航欄啦！
但是！！！！！！
在圖裡我們發現，當滾動條出現時，旁邊的佈局明顯被擠壓到了
這是為什麼？？？
後面我發現，原來滾輪條是需要佔據空間的，當滾輪條出現，旁邊的佈局就會被擠壓從而出現上面這種效果。
那麼
我們該怎麼解決呢？？？

overlay

經過上網搜尋後，我發現overflow還有一種方法好像就是為了這個問題而生的。
overlay，但在我查詢時，顯示只有chrome支援，但是我使用後，發現在其他現代瀏覽器也是支援的（可能後面大家都進步了吧嘻嘻）

#secondRoute:hover {
        overflow-y: overlay;
    }

請看效果圖

可以看到不會影響到旁邊的佈局啦
使用者可以快樂使用啦

總結

路由樣式是自己根據滾輪條樣式慢慢調整的。
滾輪條樣式修改我是參考這位大佬的，下面放他的部落格地址
連結: https://blog.csdn.net/qq_36926807/article/details/80923140