之前看到乙個案例是乙個滾動的效果，是用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>最終獲取的效果就是這樣在這裡插入**片
小白乙個，可能我這個不是正確的寫法，只能當做參考，如果有錯請多多包涵！
視差滾動效果
確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...
騰訊商品滾動效果
style cursor pointer mce style cursor pointer nm use ut moveout height 30 src jscss demoimg 200906 6637716.gif mce src jscss demoimg 200906 6637716.gi...
迴圈滾動得效果
經常看到一組或內容在一定時間內迴圈滾動得效果，下面是 可以自己執行看看，在這裡面主要有三個引數 startmarquee lh,speed,delay lh是class為ir得div得行高也是高度，當lh為乙個行高時，每次滾動向前滾動一項，lh為2個行高時，向前滾動2項，以此類推，與此同時得高度要跟...