✍ 📁 🙈 🙉 🙊 : CSS overflow

CSS overflow 控制捲軸

<div id="DDf">
<select onchange="Change(this.value)">
   <option value="visible" >overflow:visible</option>
   <option value="hidden"  >overflow:hidden</option>
   <option value="auto" >overflow:auto </option>
   <option value="scroll" >overflow:scroll</option>
   <option value="overflow-x:hidden" >overflow-x:hidden</option>
   <option value="overflow-y:hidden" >overflow-y:hidden</option>
</select>
<pre>
<<c>style>
#outerDiv{overflow:<span id="span1">visible</span>
          overflowx:<span id="span2">visible</span>  
          overflowy:<span id="span3">visible</span> }

<<c>/style>
</pre>
</div>

if(x == "overflow-y:hidden"){ overflow.style.overflow='scroll' ;
                              overflow.style.overflowY='hidden' ; }

span1.innerHTML = overflow.style.overflow;
span2.innerHTML = overflow.style.overflowX;
span3.innerHTML = overflow.style.overflowY;

//alert(overflow.style.overflowX)
//overflow-x:hidden
}

</script>

#DDf{position: fixed;
top:10px ; left:350px}

input  {cursor:pointer;}

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<h3 style="text-align: center;">CSS滾動條實現步驟及美化小技巧</h3>

<div id="DPoverflow" style="height: 600px; width:90%;overflow:scroll;border: 3px solid black;margin:auto;font-size:22px;">
<pre>::-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 {
}

</pre>
</div>

<style>

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}