互動

JavaScript 是很好用的工具,但是為了模擬出瀏覽器應該就可以處理的東西而寫好幾百行的程式碼,就像想用榔頭打蒼蠅。

幸好,CSS 逐漸跟上腳步。像是 CSS Scroll Snap 就能夠不寫任何一行 JavaScript 即可進一步掌控瀏覽器的行為。

外圍圓圈的大小代表知道某功能的使用者總數,而內圈代表實際在使用的人數。 將滑鼠移到節點上,就可以看到詳細資料,還有代表此問卷答題者總數的區塊

「全體」這欄顯示每一項技術的整體使用情況(也就是答題者選取了「會再使用」或「不會再使用」), 而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景,代表該分組比全體平均比例還要高。

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
overscroll-behavior
18.84%
12.33%
21.21%
20.64%
19.58%
19.55%
19.76%
Scroll Snap
11.27%
7.93%
7.73%
10.13%
11.27%
14.1%
16.47%
overflow-anchor
7.63%
7.49%
10.87%
9%
6.32%
5.74%
6.35%
與全體使用情況的差距:
-20%-10%0+10%+20%

Scroll Snap

完成答題百分比 99.28% (11236)
完成答題百分比 99.28% (11236)
百分比%數量Σ
已經在用11.56%
知道是什麼,但沒用過40.21%
沒聽過/不確定那是什麼47.52%

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

overscroll-behavior

完成答題百分比 99.2% (11227)
完成答題百分比 99.2% (11227)
百分比%數量Σ
已經在用19.8%
知道是什麼,但沒用過21.75%
沒聽過/不確定那是什麼57.66%

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.

overflow-anchor

完成答題百分比 99.31% (11239)
完成答題百分比 99.31% (11239)
百分比%數量Σ
已經在用7.25%
知道是什麼,但沒用過14.54%
沒聽過/不確定那是什麼77.51%

The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.