亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

        

          

              




              

              
	
                
              
	
	

              

              





              	當(dāng)前位置：首頁   >   IT技術(shù)  >  Web編程  > 正文 
              



              
	
              
		
		
              
			
              
				
              側(cè)邊導(dǎo)航欄滾動(dòng)條---CSS overflow實(shí)現(xiàn)
              2021-09-30 10:29:16
              			
				
              
					 
               
              

              給側(cè)邊導(dǎo)航欄增加滾動(dòng)條，element的滾動(dòng)條好像不太好用，所以就使用CSS 的overflow來實(shí)現(xiàn)，overflow屬性給父元素增加
              

              HTML
              

              

              ?
              

              ?CSS
              

              

              /*滾動(dòng)條*/
.scroll {
  height: calc(100vh - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* 定義滾動(dòng)條樣式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #195fab;
}

/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #072E97;
  border-radius: 10px;
  background-color: #195fab;
}

/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}
              

              

              效果呈現(xiàn)，長度超過屏幕，自動(dòng)顯示豎向滾動(dòng)條
              

              

              ?
              

               
              
					 
              本文摘自 ：https://www.cnblogs.com/ 
              
				
              

				
				
				
              
					開通會員，享受整站包年服務(wù)立即開通 >
				
              
				

			
              
			
              
				
               推薦內(nèi)容