CSS HTML滾動效果，滾動選擇器

之前看到乙個案例是乙個滾動的效果，是用css和html寫的乙個滾動選擇器，主要是用了css裡面的scroll-snap-type和scroll-snap-align他們有不同的引數可以實現不同的效果，小白不太熟悉，需要的話可以去看文件，下面是效果圖

這個是實現的方法，但是那個案例並沒有說如何獲取當前值，所以我就自己嘗試去琢磨了下，

//元素頁面居中

body 
*/* 最大盒子 */
.box 
.box li 
.box li:last-child 
/* 整體居中 */
.div 
/* 選擇框 */
.div::after 
//清除滾動條
::-webkit-scrollbar 
<
/style>
="div"
>
="box"
>
/* 開頭需要空兩行*/
<
/li>
<
/li>
第一<
/li>
第二<
/li>
地三<
/li>
第四<
/li>
第五<
/li>
第六<
/li>
第七<
/li>
第八<
/li>
第九<
/li>
第十<
/li>
<
/ul>
<
/div>
// 獲取ul
document.
queryselector
('ul').
addeventlistener
('scroll'
,ajacs
(1000))
// 防抖定時器
function ajacs
(times)
/*獲取滾動條高度*/
let scrolltop =
this
.scrolltop
time =
settimeout((
)=>
, times);}
}// 最終輸出位置
function ajas
(scrolltop)
<
/script>
<
/body>
<
/html>最終獲取的效果就是這樣在這裡插入**片
小白乙個，可能我這個不是正確的寫法，只能當做參考，如果有錯請多多包涵！