الموقع الرسمي: http://iscrolljs.com/
أبسط بنية دوم من iscroll:
<div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </viv>
تهيئة iscroll
var myscroll = isCroll جديد ('#Wrapper' ، Options) ؛تهيئة الإعدادات
تهيئة الإعدادات مثال الاستخدام:
var myscroll = new isCroll ('#wrapper' ، {mousewheel: true ، scrollbar: true}) ؛قائمة الإعدادات:
ينتمي إلى | اسم السمة | يوضح | القيمة الافتراضية |
|---|---|---|---|
المكتبة الأساسية كرو | Options.usetRansform | سواء كنت تستخدم خاصية تحويل CSS3 | حقيقي |
Options.usetransition | سواء كنت تستخدم خاصية الانتقال لـ CSS3 ، استخدم requestAnimationFram بدلاً من ذلك | حقيقي | |
Options.hwcompositing | سواء لتمكين تسريع الأجهزة | حقيقي | |
خيارات | سواء لتمكين تأثير الرسوم المتحركة المرنة ، قم بإيقاف تشغيله لتسريع | حقيقي | |
الميزات الأساسية الميزات الأساسية | خيارات. انقر | سواء لتمكين حدث النقر. يوصى بإيقاف تشغيل هذا الخيار وتمكين أحداث النقر المخصصة (Options.TAP) | خطأ شنيع |
Options.DisableMouse | ما إذا كان لإيقاف الكشف عن الأحداث الماوس. إذا كنت تعرف أي منصة يجب تشغيلها ، فيمكنك تمكينها من التسارع. | خطأ شنيع | |
Options.disablePointer | ما إذا كان لإيقاف الكشف عن حدث المؤشر. إذا كنت تعرف أي منصة يجب تشغيلها ، فيمكنك تمكينها من التسارع. | خطأ شنيع | |
Options.disableTouch | ما إذا كان لإيقاف تشغيل الكشف عن الأحداث. إذا كنت تعرف أي منصة يجب تشغيلها ، فيمكنك تمكينها من التسارع. | خطأ شنيع | |
الخيارات | عند استخدام المحور الأفقي لـ ISCROLL ، إذا كنت ترغب في استخدام المحور العمودي للنظام للفة ويدفع على المحور الأفقي ، فيرجى تشغيله. الحدث الممر التجريبي | خطأ شنيع | |
Options.freescroll | يتم استخدامه بشكل رئيسي عندما يصعد كل من التمرير لأعلى ولأسفل ، يسار ويمين ، ويمكن تمريره في أي اتجاه. 2D التمرير التجريبي | خطأ شنيع | |
Options.Keybindings | ربط الحدث الرئيسي. روابط رئيسية | خطأ شنيع | |
الخيارات | عكس عجلة الماوس. | خطأ شنيع | |
الخيارات | سواء كنت ستشغل الرسوم المتحركة بدء التشغيل ، قم بإيقاف تشغيلها لتحسين الكفاءة. | حقيقي | |
الخيارات | سواء للاستماع إلى أحداث عجلة الماوس. | خطأ شنيع | |
Options.PreventDefault | سواء لحظر الحدث الافتراضي. | حقيقي | |
الخيارات | ما إذا كنت تريد عرض شريط التمرير الافتراضي | خطأ شنيع | |
الخيارات الخيارات | يمكنك تعيين ما إذا كنت تريد عرض أشرطة التمرير الأفقية أو العمودية | scrollx false صحيح صحيح | |
الخيارات | سواء لتمكين أحداث الصنبور المخصصة يمكنك تخصيص اسم حدث TAP | خطأ شنيع | |
شريط التمرير أشرطة التمرير | الخيارات | ما إذا كنت تريد عرض شريط التمرير الافتراضي | خطأ شنيع |
Options.fadescrollbars | سواء كان ذلك لتتلاشى شريط التمرير ، قم بإيقاف تشغيله للتسريع | حقيقي | |
Options.InteractivesCrollBars | هل يمكن للمستخدم سحب شريط التمرير | خطأ شنيع | |
خيارات | سواء كان ذلك لإصلاح حجم شريط التمرير ، يوصى بتمكينه عند تخصيص شريط التمرير. | خطأ شنيع | |
Options.shrinkscrollbars | ما إذا كان يجب تقليص شريط التمرير عند تجاوز التمرير حدود التمرير. "مقطع": اقتصاص شريط التمرير بعد ذلك "المقياس": تحجيم شريط التمرير بشكل متناسب (يحتل موارد وحدة المعالجة المركزية) كاذبة: لا تقلص ، | خطأ شنيع | |
الخيارات | يرشد كيف يجب تمرير iscroll ، والتنفيذ الأساسي لأشرطة التمرير. | ||
Options.indicators.el | إنشاء حاوية لأشرطة التمرير. العنصر الأول في الحاوية هو المؤشر. على سبيل المثال: المؤشرات: { EL: document.getElementById ('Iducator') } المؤشرات: { EL: '#Indicator' } | ||
Options.Indicators.ignoreBoundaries | سواء لتجاهل حدود الحاوية. ضبط على صواب لتعيين سرعة التمرير موازي العرض التوضيحي | خطأ شنيع | |
Options.Indicators.Listenx Options.Indicators.Listeny | يراقب المؤشر تمرير هذا الاتجاه ، والذي يمكن ضبطه على اتجاه واحد أو اتجاهين. | حقيقي | |
Options.indicators.speedRatiox Options.indicators.speedRatioy | سرعة المؤشر بالنسبة إلى شريط التمرير الرئيسي | 0 | |
Options.indicators.fade الخيارات الخيارات Options.Indicators.Shrink | إعدادات مثل أشرطة التمرير الحد الأدنى العرض التوضيحي | ||
Options.ProbeType | مطلوب iscroll-probe.js ليصبح ساري المفعول probeType: 1 يتم تشغيله عند التمرير غير مشغول probeType: 2 نشأ في كل وقت معين عند التمرير probeType: 3 تم تشغيله مرة واحدة لكل Pixel Scroll | ||
تقسيم الصفحة المفاجئة | الخيارات | تقسيم الحاويات تلقائيًا لجعل تأثير الفوانيس الدوارة ، إلخ. الخيارات. Options.snap: الجزء EL // وفقًا للعنصر | خطأ شنيع |
تكبير تكبير | Options.zoom | سواء كنت ستشغل التكبير من الأفضل استخدام iscroll-zoom.js إذا كان التكبير غير واضح ، يمكن تعريف حاوية المصدر على أنها حجم 2 أضعاف الحجم ، ثم المقياس (0.5) تكبير العرض التوضيحي | خطأ شنيع |
Options.zoommax | أقصى مستوى التكبير | 4 | |
Options.zoommin | الحد الأدنى لمستوى التكبير | 1 | |
Options.Startzoom | مستوى التحجيم الأولي | 1 | |
الخيارات | عمل الأسطوانة ضبط على "التكبير" ، يمكنك التكبير مع عجلة التمرير | غير محدد | |
المزيد من الإعدادات | Options.BindTowRapper | سواء كنت تتوقف عن التمرير عندما يتجاوز المؤشر أو اللمس الحاوية | خطأ شنيع |
الخيارات | تأثير الرسوم المتحركة المرنة التأثيرات المحددة مسبقًا: "التربيعية" ، "دائرية" ، "عودة" ، "ترتد" ، "مرنة" (لا يمكن التعبير عن آخر اثنين من خلال CSS3) يمكنك أيضًا تخصيص التأثيرات الارتداد: { النمط: 'cubic-bezier (0،0،1،1)' ، // css3 fn: function (k) {return k ؛ } // عند استخدام requestAnimationFrame ، } | 'دائري' | |
Options.bouncetime | يدوم عدد ميلي ثانية من الرسوم المتحركة المرنة | 600 | |
الخيارات | تدحرج الزخم تباطؤ كلما زادت أسرع ، فإن السعر الموصى به لا يزيد عن 0.01 | 0.0006 | |
الخيارات. mousewheelspeed | سرعة عجلة الماوس | ||
Options.preventDefaultException | قوائم العناصر التي لا تمنع الأحداث الافتراضية ؛ | {tagname: /^(إدخال | Textarea | زر | حدد) $ /} | |
الخيارات. ResizePolling | إعادة حساب الفاصل الزمني لوقت iscroll عند تغيير حجم النافذة | 60 | |
ربط المفتاح | Options.Keybindings | استمع إلى الأحداث الرئيسية للتحكم في Iscroll على سبيل المثال: keybindings: { Pageup: 33 ، Pagedown: 34 ، النهاية: 35 ، الصفحة الرئيسية: 36 ، اليسار: 37 ، UP: 38 ، اليمين: 39 ، أسفل: 40 } | |
iscroll5 API:
ينتمي إلى | اسم الطريقة | يوضح |
|---|---|---|
التمرير | Scrollto (x ، y ، الوقت ، التخفيف) | قم بالتمرير إلى: x ، y ، الحدث ، طريقة التخفيف X: int Y: int الوقت: int التخفيف: التربيعية | دائري | الظهر | ترتد | مرنة انظر كائن iscroll.utils.ase مثال: myscroll.scrollto (0 ، -100 ، 1000 ، iscroll.utils.ase.elastic) ؛ |
Scrollby (x ، y ، الوقت ، التخفيف) | قم بالتمرير إلى مكان ما بالنسبة للموقف الحالي البقية هي نفسها كما هو مذكور أعلاه | |
التمرير (EL ، TIME ، Offsetx ، Offety ، Tighting) | انتقل إلى عنصر. EL هي المعلمة المطلوبة Offsetx/Offsety: الإزاحة بالنسبة لعنصر EL. تم تعيينه على صواب ليكون مركز الشاشة انتقل إلى العنصر | |
تقسيم الصفحة المفاجئة | gotopage (x ، y ، الوقت ، التخفيف) | اقسم الصفحة وفقًا للخيارات. snap وقفز إلى صفحة في المناظر الطبيعية أو صورة. يمكن لـ XY سريانها في نفس الوقت. استخدم مع الخيارات. snap |
التالي() السابق () | الصفحة السابقة ، الصفحة التالية استخدم مع الخيارات. snap | |
تكبير | تكبير (مقياس ، x ، y ، الوقت) | حاوية تحجيم المقياس: عامل التحجيم |
ينعش | ينعش() | تحديث iscroll |
تدمير | تدمير () | تدمير iscroll وحفظ الموارد |
أحداث iscroll:
Be ForresCrollStart | ينقر المستخدم على الشاشة ، ولكن لم يتم تهيئته بعد قبل التمرير |
|---|---|
ScrollCancel | إلغاء بعد تهيئة التمرير |
Scrollstart | ابدأ التمرير |
التمرير | التمرير |
انتقل | ينتهي التمرير |
نفض الغبار | اضغط على الشاشة اليسرى واليمين |
Zoomstart | ابدأ التحجيم |
التكبير | نهاية التكبير |
مثال استخدام الحدث:
myscroll = isCroll جديد ('#clospper') ؛ myscroll.on ('Scrollend' ، dosomething) ؛خصائص iscroll:
myscroll.x/y | الموقع الحالي |
|---|---|
myscroll.directionx/y | اتجاه التمرير في المرة الأخيرة (-1 لأسفل/يمين ، 0 يبقى أصليًا ، 1 لأعلى/يسار) |
myscroll.currentPage | معلومات المفاجئة الحالية |
myscroll.maxscrollxmyscroll.maxscrolly | myscroll.x/y عند التمرير إلى الأسفل |