iframe滾動條(iframe滾動條的設置方法)

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

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

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

　　我決定把瀏覽器的滾動條隱藏,iframe的滾動條放出來,并且通過對iframe和承載它的p做了一些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滾動條的設置方法”這篇文章對大家有幫助,同時也希望大家多多支持本站,關注本站行業資訊頻道,更多相關知識等著你來學習!