HTML
捲軸控制在網頁設計上算是滿常碰到的問題,尤其當 div 排版法漸成為主流時, 善用 ccs overflow 就能有效的的掌握各種捲軸效果。 overflow: 控制當內容超過顯示區域時捲軸的顯示, overflow-x: x捲軸的顯示。 overflow-y: y捲軸的顯示。 捲軸顯示有四種狀態 ﹕ visible(預設):內容完全顯示不嵌入顯示區域。 auto:內容嵌入顯示區域,並視情況顯示水平與垂直捲軸。 scroll:內容嵌入顯示區域,水平捲軸會出現但視情況顯示可捲動或不可捲動。 hidden:內容嵌入顯示區域,捲軸不會出現。
<style> #outerDiv{overflow:visible overflowx:visible overflowy:visible } </style>
::-webkit-scrollbar { width: 16px; height: 16px; } /* 滾動條角 */ ::-webkit-scrollbar-corner {background-color:black} /* 滾動條軌道 */ ::-webkit-scrollbar-track { background-color: gainsboro ; border: 3px solid black;} /* 滾動條拇指 */ ::-webkit-scrollbar-thumb { background-color: rgb(169,169,169) ; border-radius: 20px; border-style: inset; border-color: rgb(220,220,220) border-width:9px 9px 9px 9px; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(112, 112, 112); } ::-webkit-scrollbar-thumb:active { background-color: rgb(128, 128, 128); } /* Buttons 按鈕:單按鈕*/ ::-webkit-scrollbar-button:single-button { background-color: rgb(64, 64, 64); display: block; background-size: 100px; background-repeat: no-repeat; } /* Up */ ::-webkit-scrollbar-button:single-button:vertical:decrement { border-style: solid; border-width: 0 7.5px 15px 7.5px; border-color: transparent transparent #DCDCDC transparent; } ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { border-style: solid; border-width: 0 7.5px 15px 7.5px; border-color: transparent transparent #007bff transparent; } ::-webkit-scrollbar-button:single-button:vertical:decrement:active { } /* Down */ ::-webkit-scrollbar-button:single-button:vertical:increment { border-style: solid; border-width: 15px 7.5px 0 7.5px; border-color: #DCDCDC transparent transparent transparent; } ::-webkit-scrollbar-button:single-button:vertical:increment:hover { border-style: solid; border-width: 15px 7.5px 0 7.5px; border-color: #007bff transparent transparent transparent; } ::-webkit-scrollbar-button:single-button:vertical:increment:active { } /* Left */ ::-webkit-scrollbar-button:single-button:horizontal:decrement { border-style: solid; border-width: 7.5px 15px 7.5px 0; border-color: transparent #DCDCDC transparent transparent ; } ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { border-style: solid; border-width: 7.5px 15px 7.5px 0; border-color: transparent #007bff transparent transparent ; } ::-webkit-scrollbar-button:single-button:horizontal:decrement:active { } /* Right */ ::-webkit-scrollbar-button:single-button:horizontal:increment { border-style: solid; border-width: 7.5px 0 7.5px 15px; border-color: transparent transparent transparent #DCDCDC; } ::-webkit-scrollbar-button:single-button:horizontal:increment:hover { border-style: solid; border-width: 7.5px 0 7.5px 15px; border-color: transparent transparent transparent #007bff; } ::-webkit-scrollbar-button:single-button:horizontal:increment:active { }
沒有留言:
張貼留言