Javascript在滾動上添加刪除類

| | | | | | | | | | | | | | | | | |

滾動條和用戶體驗

用戶現在在瀏覽網站時已經習慣了一些體驗。例如,您希望網站左上角的公司徽標將您帶到主頁。但是如果它不起作用怎麼辦?如果此網站上的所有內容都您認為的完全相反,會怎樣?

想像一下,如果有一個滾動條,但是當您移動鼠標或幻燈片上的滾動按鈕時你的手指在設備的觸摸板上,什麼都沒有發生。這將被認為是一種糟糕的用戶體驗。

什麼 - 造就或破壞了良好的用戶體驗本身可能是一項工作,但它的一部分 - 它是有效的出於美觀的原因,非常肯定容量和條滾動隱藏。

滾動條是我們可以期望在網頁上看到的很好的指標。如果我們看到一個滾動條,我們預計有必要向下滾動以查看內容。當您看不到滾動條時,通常有以下兩個原因之一:

  1. 所見即所得 - 可見區域(屏幕)的高度和寬度對應於網站的高度和寬度。
  2. 網站設計包括一種箭頭或動畫功能,通過滾動顯示更多內容可用。只有當您開始滾動時才會出現滾動條。默認設置是在此之前保持隱藏狀態。
  3. 作為開發人員,正確使用滾動條將改善網站的用戶體驗,從而讓客戶留在網站上。

注邊: 有意你想使用水平滾動條時,一定要使用它們。如果它們無意中出現在你的網站上,通常是因為組件大小有問題。不要隱藏水平滾動條

CSS 實現

首先要注意的是,所有主流瀏覽器都是平等的。適用於 Firefox 的方法不適用於 Chrome或 Internet Explorer,反之亦然。CSS 使用我們所說的 provider prefixes browser prefixes 來幫助我們提供對多種瀏覽器的支持。我們在下面展示它們:

< br>

備忘單供應商前綴

供應商前綴 瀏覽器覆蓋
-webkit- Chrome 、Safari、較新版本的 Opera 和大多數 iOS 瀏覽器,包括 iOS 版 Firefox
-moz - Firefox(非 iOS)
-o- Opera 的舊版本
-ms- Internet Explorer 和 MS Edge

網址: 來源:MDN - CSS Prefixes

Alt Text:Mozilla 開發者網絡創建了一個方便的備忘單來記住要使用哪個前綴使用

Caption: MDN 創建了一個方便的備忘單來記住瀏覽器使用哪個前綴

那麼問題就變成了,如何我們知道什麼時候需要前綴,什麼時候不需要? CSS 創建者總是在嘗試新的屬性和新的做事方式——如果有足夠的新屬性,它可能還不能與所有瀏覽器兼容。

幸運的是,有一些工具可以檢查你的 CSS並添加您需要的前綴。您也可以手動完成並使用 caneuse documents 供您 MDN 幫助確定瀏覽器兼容性。

讓代碼

當我們在 Chrome 中運行這段代碼時,它應該會產生一個灰色的背景 div 和一些文本,你可以滾動瀏覽。包括兩個最常見的實現 - Firefox 位於