ملخص
يعيد هذا الإصدار من ISCROLL 4 كتابة الكود الأصلي لإطار ISCROLL. تم إنشاء هذا المشروع بالكامل بسبب الاستخدام الواسع النطاق لمتصفحات WebKit للهاتف المحمول (مثل iPhone و iPad و Android)
يتم توفير طريقة محلية لتحريك محتوى العنصر الذي يحدد الارتفاع والعرض. لسوء الحظ ، في هذه الحالة ، لا يمكن أن تحتوي جميع صفحات تطبيقات الويب على رأس أو نهاية الصفحة أو محتوى قابل للتمرير مع الموضع: مطلق.
المنطقة الوسطى.
ومع ذلك ، فإن أحدث مراجعة لنظام Android يمكن أن تدعم هذه الميزة بالفعل (على الرغم من أن الدعم ليس جيدًا بشكل خاص) ، ويبدو أن Apple مترددة في تطبيق حدث شريحة الإصبع الواحد على عنصر DIV.
بالإضافة إلى ميزات الإصدارات السابقة من Iscroll ، يتضمن Iscroll 4 أيضًا الميزات التالية:
(1) التكبير (قرصة/تكبير)
(2) اسحب لأعلى/لأسفل للتحديث
(3) تحسين السرعة وتحسين الأداء
(4) التقاط العناصر بدقة
(5) شريط التمرير المخصص
نصائح ودية: ISCROLL 4 ليس بديلاً بسيطًا لـ ISCRORL 3 ، ووثائق API مختلفة بالفعل. بالنظر أيضًا إلى أن هذا الإصدار موجود في الإصدار التجريبي ، فقد يكون لبعض واجهات برمجة التطبيقات تغييرات طفيفة.
دليل المستخدم
ستجد في هذا المستند العديد من الأمثلة لتعليمك كيفية البدء بسرعة باستخدام مكتبة Script Iscroll. قد يكون من الممل بعض الشيء الإشارة إلى المثال التجريبي في المقالة وقراءة هذا المستند بعناية ، ولكن هذه المقالة هي جوهر مكتبة البرنامج النصي.
يحتاج ISCROLL إلى تهيئة العناصر المراد تمريرها ، ولا تحد من عدد العناصر التي تستخدم ISCROLL في صفحة (تكوين الأجهزة الخاص بك لا يعتبر هنا). سيؤثر نوع وطول المحتوى في عنصر التمرير على مكتبة البرنامج النصي ISCROLL إلى حد ما
عدد العناصر التي يمكن استخدامها في وقت واحد.
عند استخدام مكتبة نص ISCROLL ، يجب أن يكون بنية شجرة DOM بسيطة بما يكفي لإزالة العلامات غير الضرورية ومحاولة تجنب التعشيش المفرط للعلامات.
الهيكل الأمثل لاستخدام iscroll هو كما يلي:
<div id = "wrapper"> <ul> <li> </li> ...... </ul> </viv>
في هذا المثال الصغير ، سيتم تمرير علامة UL. يجب توصيل iscroll إلى الغلاف خارج محتوى التمرير لإنتاج نتائج.
【احتياطات】:
يمكن تمرير عنصر الطفل الأول فقط في الغلاف. إذا كنت تريد المزيد من العناصر للتمرير ، فيمكنك تجربة طريقة الكتابة التالية:
<div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </viv> </viv>
في هذا المثال ، يمكن تمرير عنصر التمرير حتى لو كان يحتوي على عنصرين UL
يجب أن يتم إنشاء مثيل له قبل الاتصال ، يمكنك إنشاء إنشاء iscroll في الحالات التالية:
(1) استخدم الحدث الذي تم تحميله على OndomContentAnting لتحقيق التمرير
مناسبة للتمرير محتوى لا يحتوي إلا على نص وصور ، وجميع الصور ثابتة أحجام ثابتة
<script src = "isCroll.js"> </script> <script> var myscroll ؛ وظيفة loaded () {myscroll = new isCroll ("wrapper") ؛ } window.adDeventListener ("DomContentLoaded" ، محمّل ، خطأ) ؛ </script>ملاحظة: متغير myscroll عالمي ، بحيث يمكنك تسميته في أي مكان
(2) استخدم حدث Onload لتحقيق التمرير
نظرًا لأنه سيتم استدعاء الحدث الذي تم تحميله بعد تحميل بنية DOM ، لا يجوز تحديد طول وعرض منطقة التمرير قبل عدم تحميل عناصر مثل الصور. في هذا الوقت ، يمكن تنفيذ حدث Onload.
<script src = "isCroll.js"> <script> <script> var myscroll ؛ وظيفة loaded () {setTimeOut (function () {myscroll = new isCroll ("wrapper") ؛} ، 100) ؛ } window.adDeventListener ("load" ، loaded ، false) ؛ </script>في هذه الحالة ، سيتم تهيئة iscroll بعد تحميل موارد الصفحة (بما في ذلك الصور) 100 مللي ثانية. يجب أن تكون هذه طريقة آمنة نسبيًا لاستدعاء Iscroll.
(3) تهيئة مضمّنة
سيتم استدعاء هذا الموقف عندما يتم تحميل الصفحة في JS. لا ينصح بهذه الطريقة ، ولكن العديد من جافا سكريبت BigWigs تستخدم هذه الطريقة. ما السبب الذي يجب أن أختلفه؟
<script src = "isCroll.js"> </script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </viv> <script> var myscroll = new isCroll ("wrapper") ؛ </script>ومع ذلك ، يوصى باستخدام بعض الأساليب الجاهزة للإطار لاستدعاء ISCROLL بأمان (مثل Ready () في jQuery).
تم تمرير المعلمات في iscroll
تتيح لك المعلمة الثانية في ISCroll تخصيص بعض المحتوى ، مثل الرمز التالي:
<script> var myscroll = new isCroll ("wrapper" ، {hscrollbar: false ، vscrollbar: false}) ؛ </script>المعلمة الثانية عادة ما تكون كائن. على سبيل المثال ، لا يتم عرض شريط التمرير في المثال أعلاه. المعلمات الشائعة الاستخدام هي كما يلي:
Hscroll False يحظر التمرير الأفقي التمرير الأفقي الحقيقي الافتراضي إلى True
vscroll false scroll scroll التمرير العمودي الحقيقي الافتراضي إلى True
Hscrollbar مخففة خففة الأشرطة في الاتجاه الأفقي
vscrollbar false إخفاء شريط التمرير في الاتجاه العمودي
ثابت على نظام iOS ، عندما يتجاوز السحب العنصر حدود التمرير ، يتقلص شريط التمرير. ضبط على صواب لمنع شريط التمرير من تجاوز التمرير.
المنطقة المرئية من التمرير. الافتراضي صحيح على Android و False على iOS
يحدد Fadescrollbar Fals
يخفي Hidscrollbar شريط التمرير عندما لا يكون هناك تفاعل مستخدم افتراضي إلى True
ترتد تمكين أو تعطيل ترتد الحدود ، الافتراضي إلى صحيح
الزخم يمكّن أو يعطل القصور الذاتي ، والافتراضات إلى True ، هذه المعلمة مفيدة للغاية عندما تريد حفظ الموارد.
توجيه الإغلاق ، يلغي قفل اتجاه السحب ، يمكن أن يكون السحب الحقيقي فقط في اتجاه واحد (لأعلى/لأسفل أو يسار/يمين)
تحقيق الآثار المختلفة
تمرير تحديث "سحب إلى تحديث" العرض التوضيحي
أصبح هذا التأثير شائعًا جدًا منذ ظهور Twitter وبعض تطبيقات Apple المحلية. يمكنك إلقاء نظرة هنا.
في أحدث إصدار ، يفصل المؤلف الجزء "سحب إلى تحديث" كمكون إضافي إضافي لـ IsCroll. يمكنك النقر هنا لمعرفة كيفية عمل السحب إلى التحديث. كل ما عليك فعله هو تخصيص طريقة السحب (). قد تحتاج إلى Ajax لتحميل محتوى جديد ، ولكن تذكر استدعاء Refresh بمجرد أن تتغير شجرة DOM. يجب أن نتذكر أننا في المثال أضفنا تأخيرًا ثانية واحدة لمحاكاة تأثير تأخير الشبكة. بالطبع ، إذا كنت لا ترغب في استخدام هذا التأخير ، فما عليك سوى إزالة طريقة setTimeout.
تكبير (قرصة / تكبير) "سحب إلى تحديث" العرض التوضيحي
علينا أن نواجه حقيقة أن مجرد المتداول ليس في الواقع شيء جديد. هذا هو السبب في هذا الإصدار من Iscroll 4 نسمح لك بوضعه
كبيرة وتقلص. لتريد هذه الوظيفة ، تحتاج فقط إلى تعيين معلمة التكبير على الواقع لاستخدام الإيماءات للتكبير والخروج. يمكنك إلقاء نظرة هنا.
يتم دعم النقر المزدوج للتكبير والخارج أيضًا في Iscroll 4. لاستخدام وظيفة التكبير ، تحتاج إلى التكوين التالي على الأقل:
var myscroll = new isCroll ("Wrapper" ، {Zoom: True}) ؛
إذا كنت ترغب في تخصيص وظيفة التكبير بتعمق ، فيمكنك استخدام بعض الخيارات التالية:
يحدد Zoommax الحد الأقصى المتعدد الذي يسمح بالتكبير ، الافتراضي هو 4
[ملاحظات]: إذا كنت تريد أن يكون تحجيم الصورة فعالًا ، فيجب عليك وضعها في طبقة توليف الأجهزة. بعبارات Layman ، فهي لاستخدام -bkit -transform: Translate3D (0،0،0) على جميع عناصر IMG التي تحتاج إلى تحجيم. ومن المهم بشكل خاص أن يستغرق تسريع الأجهزة الكثير من الموارد ويجب استخدامه بحذر ، وإلا فقد يعطل تطبيقك.
snap و snap to element demo 'carousel'
تتمثل وظيفة SNAP في تحديد ما إذا كان العنصر ينزلق إلى الموضع المحدد. يتيح لك هذا التأثير إنشاء تأثير سرادق فاخر.
سيقوم المكون الإضافي تلقائيًا بتحليل عناصر من نفس التسمية أو نفس الحجم في منطقة التمرير مثل كائن الالتقاط ، ويمكنك أيضًا تحديد الكائن الملتقط من خلال المعلمات.
var myscroll = new isCroll ("wrapper" ، {snap: true ، momentum: false ، hscrollbar: false ، vscrollbar: false}) ؛يمكنك تعيين كائن SNAP عن طريق تعيين المعلمة SNAP على العلامة المحددة. على سبيل المثال ، التقاط علامة LI.
var myscroll = new isCroll ("wrapper" ، {snap: "li" ، momentum: false ، hscrollbar: false ، vscrollbar: false}) ؛في هذا المثال ، يمكن أن يلتقط التمرير العنصر العلوي الأيسر لي في منطقة التمرير
أشرطة التمرير المخصصة
في ISCROLL 4 ، يمكن استخدام سلسلة من CSS لتخصيص عرض أشرطة التمرير. يمكنك إضافة معلمة فئة إلى شريط التمرير ، على النحو التالي:
var myscroll = new isCroll ("wrapper" ، {scrollbarclass: "myscrollbar"}) ؛تجدر الإشارة إلى أن شريط التمرير يتكون من عنصرين: الحاوية والشاشة. الحاوية هي نفس ارتفاع الغلاف ، بينما تمثل الشاشة شريط التمرير نفسه.
هيكل HTML لشريط التمرير كما يلي:
<viv> <viv> </viv> </viv> .MyScrollBarv {الموضع: absolute ؛ z-index: 100 ؛ العرض: 8px ؛ القاع: 7px ؛ الأعلى: 2px ؛ يمين: 1px ؛ . / * ربما يكون ما يلي ما تريد تخصيصه */الخلفية: -webkit-radient (خطي ، 0 0 ، 100 ٪ 0 ، من (#f00) ، إلى (#900)) ؛ الحدود: 1PX Solid#800 ؛ -Webkit-Background: 4px-box ؛ -webkit-box-sizing: border-box-boxt ؛ 1px 1px 0 RGBA (255،255،255،0.5) ؛ }الطريقة العامة:
(1) تحديث هذه الطريقة يجب استدعاء عندما تتغير شجرة دوم
على سبيل المثال: setTimeOut (function () {myscroll.refresh () ؛} ، 0) ؛
(2) يوفر ISCRORL أيضًا ثلاث طرق: SCROLLTO ، SCROLLTOELEMENT و SCROLLTOPAGE ، بحيث يمكنك التحكم في تأثير التمرير من خلال JavaScript.
Scrollto (x ، y ، الوقت ، النسبي): اسمح لمحتوى scrollbar x/y في الوقت المحدد. على سبيل المثال ، يقوم myscroll.scrollto (0 ، -100 ، 200) بالتمرير لأسفل بمقدار 100 بكسل في 200 ميلي ثانية. يمكن أن يحقق myscroll.scrollto (0 ، 10 ، 200 ، True) تأثير التمرير 10 بكسل على المحور ص ضمن 200 مللي ثانية بالنسبة للموقف الحالي.
التمرير (العنصر ، الوقت): قم بالتمرير إلى العنصر المحدد خلال الوقت المحدد. على سبيل المثال ، يسير myscroll.scrolltoElement ('li: nth-child (10)' ، 100) إلى موضع عنصر LI العاشر ضمن 100 مللي ثانية. يمكن استخدام المعلمة الأولى لتصفية العناصر مع المحدد في CSS3.
Snaptopage (pagex ، pagey ، time): قم بالتمرير من الصفحة 1 إلى الصفحة 2 في 200 مللي ثانية (0 يمثل الصفحة 1 ، 1 تمثل الصفحة 2). يمكن استدعاء هذه الوظيفة عند استخدام وظيفة SNAP.
(3) Detroy () يلغي تمامًا myscroll ومساحة الذاكرة الخاصة به مشغولة
على سبيل المثال: myscroll.destroy () ؛
myscroll = فارغة ؛
اتجاه تطوير Iscroll
نموذج دعم المجال
التحجيم التحسين
توافق متصفح سطح المكتب الأفضل
تحسين حدث ONSCROL
التغييرات في إضافة قيمة التجزئة
التحديث التلقائي بعد تغيير DOM