我遇到的場景：
對於iframe視窗，自帶滾動條是整個視窗的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。
那麼首先開啟iframe時應該去掉滾動條 scrolling="no"，然後在需要滾動的區域自定義滾動條。
<iframe
frameborder
="0"
scrolling
="no"
src="index.html"
>
自定義滾動條**如下：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>滾動
title
>
<
style
>
.scroll_contain
.scroll_config::-webkit-scrollbar
.scroll_config::-webkit-scrollbar-thumb
.scroll_config::-webkit-scrollbar-track
.scroll_config::-webkit-scrollbar-arrow
style
>
head
>
<
body
>
<
div
class
="scroll_contain scroll_config"
style
="height: 200px;width: 200px"
>
<
div>
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
div>
div>
body
>
html
>
效果如下：
東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗 東方不敗東方不敗東方不敗東方不敗東方不敗東方不敗
上面出現橫向滾動條是因為編輯原始碼時不支援overflow-y:scroll，我改成了overflow:scroll的緣故。
需要注意是：只有在子容器的高度大於父容器高度時才會出現滾動條
css自定義滾動條
1 在谷歌瀏覽器和safari中可直接設定，如果想單獨對某個盒子新增，直接在偽類前面加上選擇器即可 滾動條的軌道 滾動條的滑塊按鈕 webkit scrollbar track,webkit scrollbar thumb 滾動條的上下兩端的按鈕 webkit scrollbar button we...
CSS自定義滾動條
乙個類名為parent的容器包裹了一些lorem。lorem ipsum dolor sit amet consectetur adipisicing elit.iusto,delectus libero cupiditate sapiente excepturi,ea hic,exercitati...
CSS 自定義滾動條
瀏覽器允許自定義滾動條，ie也可以改變預設的樣色，不過效果不明顯。常見谷歌瀏覽器滾動條修改 webkit scrollbar webkit scrollbar thumb webkit scrollbar track ie自定義滾動條顏色 webkit scrollbar 滾動條整體部分，可以設定寬...