iframe滾動條的設置方法

這篇文章主要介紹了iframe滾動條的設置方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　在做博客項目的時候，使用了iframe，方便根據選擇的文章類別切換顯示的內容，但是文章一般都有很多，通過bootstrap的媒體列表的方式顯示的話，iframe是一定會出現滾動條的，特別是我添加了一個“滾動條觸底之后動態加載更多的文章”的功能。這樣頁面上就會有兩個滾動條，特別奇怪。

　　iframe滾動條充當瀏覽器滾動條

　　在網上學習了一些之后，我把iframe的滾動條隱藏了（不是將iframe的scrolling屬性改為scrolling=“no”），而是通過css將其在視覺上隱藏起來（下面有代碼），這樣就可以只出現一個滾動條，但是這樣的話，文章確實一直在動態加載，但是瀏覽器的滾動條卻一直沒有動，感覺也很奇怪~

　　我決定把瀏覽器的滾動條隱藏，iframe的滾動條放出來，并且通過對iframe和承載它的div做了一些css上的調整，讓iframe滾動條“充當”了瀏覽器的滾動條。圖片中箭頭指向的滾動條實際上是iframe的。

　　iframe滾動條設置

　　1、滾動條

　　1）滾動屬性

　　<iframescrolling="no"></iframe>

　　no:刪除yes:一直顯示auto:自動顯示

　　2）除右留下

　　<iframestyle='overflow-x：auto;overflow-y：hidden；'></iframe>

　　3）除下留右

　　<iframestyle='overflow-x：hidden;overflow-y：auto；'></iframe>
　　/*設置滾動條的樣式*/
　　::-webkit-scrollbar{
　　width:3px;
　　}
　　/*滾動槽*/
　　::-webkit-scrollbar-track{
　　box-shadow:inset006pxrgba(0,0,0,0.1);
　　border-radius:10px;
　　}
　　/*滾動條滑塊*/
　　::-webkit-scrollbar-thumb{
　　border-radius:10px;
　　background:rgba(0,0,0,0.1);
　　box-shadow:inset006pxrgba(0,0,0,0.15);
　　}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“iframe滾動條的設置方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!