全屏滾動的錯覺

cjie 發(fā)布于2019-08-21 10:37 / 1257人閱讀

摘要：所以屏幕的滾動實際上是內(nèi)部的滾動，所以也就沒有觸發(fā)的滾動事件。

先將下面標(biāo)簽、樣式以及事件寫好，運行之后滾動屏幕控制臺正常輸出。

html, body {height: auto; overflow: auto;}
#container {height: 1000px; overflow: auto;}

$(document).scroll(function(){
    console.log("document is scrolling");
});

將樣式稍作修改如下，再次運行并滾動屏幕，控制臺并無輸出。

html, body {height: 100%; overflow: auto;}
#container {height:1000px; overflow: auto;}

其實分析起來原因很簡單，就是html,body的高度限制為屏幕高度（作全屏經(jīng)常使用的樣式），所以#container高度超過屏幕高度后就產(chǎn)生滾動條，其height體現(xiàn)在scrollHeight(DOM節(jié)點的屬性)。所以屏幕的滾動實際上是#container內(nèi)部的滾動，所以也就沒有觸發(fā)document的滾動事件。

GPU云服務(wù)器云服務(wù)器全屏滾動插件錯覺讓全屏顯示的js代碼 html的滾動條

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85869.html

相關(guān)文章

前端每日實戰(zhàn)：157# 視頻演示如何用純 CSS 創(chuàng)作一個棋盤錯覺動畫

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbigC0?w=400&h=299); 效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

Rainie 2019-08-29 17:00 評論0 收藏0
前端每日實戰(zhàn)：157# 視頻演示如何用純 CSS 創(chuàng)作一個棋盤錯覺動畫

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbigC0?w=400&h=299); 效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

shleyZ 2019-08-02 11:44 評論0 收藏0
前端每日實戰(zhàn)：152# 視頻演示如何用純 CSS 創(chuàng)作一個圓點錯覺效果

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀此項目無用戶自定義的元素，利用系統(tǒng)默認(rèn)的元素作為容器。 showImg(https://segmentfault.com/img/bVbhOAl?w=400&h=300); 效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https:...

hosition 2019-08-29 16:52 評論0 收藏0
前端每日實戰(zhàn)：152# 視頻演示如何用純 CSS 創(chuàng)作一個圓點錯覺效果

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。源代碼下載每日前端實戰(zhàn)系列的全部源代碼請從下載代碼解讀此項目無用戶自定義的元素，利用系統(tǒng)默認(rèn)的元素作為容器。 showImg(https://segmentfault.com/img/bVbhOAl?w=400&h=300); 效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https:...

marek 2019-08-02 11:38 評論0 收藏0