相容ie8的單屏滾動外掛程式Scrollify修改。

2022-05-05 01:51:11 字數 1169 閱讀 9902

專案要做乙個類似小公尺**那樣滾一下滑鼠,就滾動一面螢幕的效果,又要求相容ie8,在網上搜了許多外掛程式,都不好用,只有乙個scrollify.js用著還不錯。

但是這個外掛程式有乙個缺點,就是滾動滑鼠滑輪一下就滾動一頁,如果你滾了很大一圈,就滾了好幾頁,所以決定改一下原始碼,但是又不知道從何改起。

wheelhandler: function

(e, t)

l = settimeout(function

() }

else

if (t > 0)

}if (u >= 0)

else

},25)

},

這段**是滑動滾輪執行的**,u代表的是當前應該滑到的頁數,d(u)函式,很明顯d函式就是控制頁面滾動的函式了,於是發現,只要一滑動滑輪,這兩個函式就在不停的執行,也就是說你滑一格就執行一頁,滑兩格就執行兩頁。

這個外掛程式還有兩個屬性,滾動之前和滾動以後,所以我們可以定義乙個變數,在滾動之前,值為false,滾動以後,值為true,然後在控制頁面滾動的**裡判斷,如果是false的話,說明頁面還沒有滾完,這時候在滾滑輪就不繼續執行,如果是true,說明頁面滾完了,滾完了就可以繼續執行下乙個頁面了

所以**改成這樣

wheelhandler: function

(e, t)

l = settimeout(function

() }

else

if (t > 0)

}if (u >= 0)

else

},25)

}},

在函式的一開始定義變數fvk,before:function(){}裡,吧fvk設為false,after: function() ;

這幾部完成以後,頁面就可以大膽的滑動了,再也不用擔心一不小心滑太遠的問題。

這些問題都解決以後還有乙個問題,就是在移動端如果顛倒裝置改變螢幕尺寸的時候,這個外掛程式會出錯,至今找不到原因,但是重新整理一下就好了,所以我的解決辦法很簡單粗暴,只要頁面大小一改變,當前頁面就重新整理一遍

$(window).resize(function())

這樣簡單粗暴的方法,特別適合我們這種乙個人完成的小型專案。

相容IE8的垂直居中

子元素不定寬高 1.利用偽元素 inline block vertical align,該方法相容ie8 ie8 該方法的居中子元素display屬性為inline block wrap wrap before wrap content2.通過writing mode屬性改變水平流為垂直流 居中子元...

相容ie8的元素居中

今天重新回來修改一下彈窗居中這個功能 彈窗,就是將乙個框框放在螢幕中間,這個框的高度不確定。不需要相容ie8及以下,css用下面這個 完全夠了 pop pop content有時要相容ie8 那麼就要如下 由於父元素是固定定位,採用父元素display table cell vertical ali...

相容ie8的rgba 寫法

在頁面中設定乙個半透明的div一般情況下使用rgba 函式,但在ie8情況下無法使用rgba 函式。rgba的含義,r代表red,g代表green,b代表blue,紅綠藍是三原色。所有顏色都可以由這三種顏色拼合而成。a代表透明度。比如rgba 255,255,255,0.1 就是透明度為0.1的白色...