當前位置:編程學習大全網 - 源碼下載 - 各位對於iscroll.js用時有沒有遇到過問題

各位對於iscroll.js用時有沒有遇到過問題

iscroll是什麽?

iscroll.js是Matteo Spinelli開發的壹個js文件,使用原生js編寫,不依賴與任何js框架。旨在解決移動webkit系瀏覽器的區域滾動問題,兼容mobile safari、android默認瀏覽器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心瀏覽器。最新版本為iscroll4。

官方網站:iscroll4

iscroll的用武之地

1.區域滾動

我們在pc端web開發中,有時會用固定某壹區域的寬度和高度,然後使用overflow:auto,使其內容在該區域內滾動。

iphone默認瀏覽器(mobile safari)也支持固定區域的滾動,但必須雙指滑動操作,而且沒有滾動條。mobile safari中的單指滑動只針對頁面級別,不針對頁面元素。這樣的操作體驗很麻煩,而且很多用戶根本不知道雙指能夠區域滑動。

android自帶瀏覽器也支持區域滾動,且可以單指滑動操作,但是滑動起來卡的半死半活,很不流暢。

使用iscroll,可以完美解決上述問題了,不僅可以在iphone和android上單指滑動,而且滑動起來流暢之極,酣暢淋漓。滑動過程中也有漂亮的滾動條提示,讓妳舒心不已。

2.固定定位

固定定位不是iscroll的原生用法,而是使用iscroll協助解決固定定位問題。

話說iphone很先進,但就是不支持position:fixed。這下苦了我們了,固定定位怎麽解決啊,我們會經常遇到固定標題欄、固定工具欄等情況啊!!

使用iscroll協助解決:首先獲取瀏覽器窗口高度;然後獲取固定工具欄的高度;接著將除固定工具欄之外的內容全部放在壹個固定區域內,該固定區域的高度=窗口高度-工具欄高度;之後對固定區域使用iscroll。這樣,整個html頁面的高度正好等於窗口高度,頁面級別不會出現滾動,工具欄就壹直固定在當前的位置。在固定區域內滑動,可以查看頁面其他內容,不會影響工具欄的定位。

鼠標滾輪滾動

iscroll支持在pc端瀏覽器中使用鼠標滾輪控制區域滾動,但操作起來很不靈敏。這是由於iscroll對鼠標滾輪事件做了攔截,然後縮小了滾輪的滾動距離,詳見iscroll4.js源代碼608-609行:

wheelDeltaX = e.wheelDeltaX / 12;//控制X軸鼠標滾輪速度

wheelDeltaY = e.wheelDeltaY / 12;//控制Y軸鼠標滾輪速度

iscroll將每次的滾輪距離縮小為系統默認距離的12分之壹,難怪滾起來很慢,感覺不靈敏。只需要將12改成1,滾輪的滾動速度就恢復正常了。妳也可以根據實際需要設置成其他值。

輸入框聚焦不靈敏、無法選擇文字

使用了iscroll之後,妳會發現點擊輸入框時不靈敏,經常無法聚焦;頁面文字也無法選擇和復制。這是由於iscroll要監聽鼠標事件和觸摸事件來進行滾動,所以禁止了瀏覽器的默認行為,詳見源代碼92行:

onBeforeScrollStart: function (e) { e.preventDefault(); },

iscroll不分青紅皂白,禁止了瀏覽器的壹切默認行為,導致上述問題。所以我們需要稍作修改:

onBeforeScrollStart: function (e) {

var target = e.target;

while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)

e.preventDefault();

},

判斷觸發事件的元素是不是input、select、textarea等表單輸入類元素,如果不是就阻止默認行為。這樣保證了輸入類元素能正確快速聚焦。

  • 上一篇:在炒股軟件輸入公式時提示“行1缺少:”怎麽辦?
  • 下一篇:大哥 幫個忙 東方財富的壹個公式
  • copyright 2024編程學習大全網