تنزيل scroller - تنزيل رمز المصدر scroller

scroller

شفرة المصدر الأخرى

v3.0.2

تنزيل

التمرير

سريع وخفيف الوزن (4 كيلو بايت GZIP) ، و Scroller المحتوى الخالي من التبعية.

مثال. mp4

لمزيد من الأمثلة على كيفية عملها مع إعدادات مختلفة وشروط واجهة المستخدم ، تحقق من هذا الرابط.

تثبيت

قم بتثبيت Scroller مع NPM:

npm install prokrutchik

أضف البرامج النصية والأنماط إلى مشروعك:

 import { Scroller } from "prokrutchik" ;
import "prokrutchik/styles.css" ;

أو إضافتها مباشرة إلى ملف HTML:

 < script src =" /path/to/prokrutchik/browser.js " > </ script >
< link href =" /path/to/prokrutchik/styles.css " rel =" stylesheet " />

التهيئة

بشكل افتراضي ، يوفر Scroller التهيئة التلقائية لجميع عناصر .scroller في الصفحة:

 < ul class =" scroller " >
  < li > First item </ li >
  < li > Second item </ li >
  < li > Third item </ li >
</ ul >

يمكنك أيضًا تهيئة المثيل يدويًا:

 < ul class =" foo " >
  < li > First item </ li >
  < li > Second item </ li >
  < li > Third item </ li >
</ ul >

< script type =" module " >
  import { Scroller } from "prokrutchik" ;

  const instance = new Scroller ( {
    element : document . querySelector ( ".foo" ) ,
  } ) ;
</ script >

إعدادات

يمكنك تكوين التمرير عبر سمات data- في HTML:

data-navigation ، يعرض/يخفي أزرار التنقل ، "visible" | "hidden" ؛
data-scrollbar ، يعرض/يخفي شريط التمرير تحت المحتوى ، "visible" | "hidden" ؛
data-align ، يحدد كيفية محاذاة المحتوى إذا كان يناسب الشاشة ، "start" | "center" | "end" ؛
data-start-position ، الموضع الأولي للمحتوى ، number of px | "start" | "center" | "end" ؛
data-start-duration ، مدة البدء في الرسوم المتحركة ، number of milliseconds .

يمكن تكوين عناصر التمرير مع:

data-anchor ، تسمية العنصر في التنقل ، string ؛
data-focused ، إذا تم تعريفه ، سيتم التمرير إلى هذا العنصر في البداية.

باستخدام JavaScript

يمكنك أيضًا تكوين التمرير باستخدام كائن التكوين:

 const scroller = new Scroller ( {
  element : document . querySelector ( ".foo" ) ,

  // Show/hide the scrollbar, "visible" | "hidden":
  scrollbar : "hidden" ,

  // Show/hide the navigation, "visible" | "hidden":
  navigation : "hidden" ,

  // How to align content if it fits the screen, "start" | "center" | "end":
  align : "center" ,

  // Initial scroller content position, "start" | "center" | "end" | number of px:
  startPosition : "center" ,

  // Starting animation duration, number of milliseconds:
  startDuration : 500 ,
} ) ;

واجهة برمجة التطبيقات العامة

يوفر Scroller API لتغيير الموضع الحالي ، ونقرات العناصر المعالجة ، وتحديث التكوين ديناميكيًا.

تغيير الموقف

لتغيير الموضع ، استخدم طريقة scrollTo :

 // Scrolls to the beginning of the content
scroller . scrollTo ( "start" ) ;

// Scrolls to the center of the content:
scroller . scrollTo ( "center" ) ;

// Scrolls to the end of the content:
scroller . scrollTo ( "end" ) ;

// Scrolls to 100px from the start of the content:
scroller . scrollTo ( 100 ) ;

// Second optional parameter specifies
// the animation duration in milliseconds.
// Scrolls to center in 500 ms:
scroller . scrollTo ( "center" , 500 ) ;

البند انقر فوق رد الاتصال

للتعامل مع النقرات على العناصر ، حدد معالج onItemClick في التكوين:

 const scroller = new Scroller ( {
  element : document . querySelector ( ".foo" ) ,
  onItemClick : ( event ) => {
    /* The `event` argument here is `TouchEvent` or `MouseEvent` depending on the user device. */
  } ,
} ) ;

تحديثات التكوين

لتحديثات التكوين ، استخدم طريقة update :

 scroller . update ( {
  scrollbar : "hidden" ,
  navigation : "hidden" ,
  align : "center" ,
  onItemClick : someFunc ,
} ) ;

أمثلة

التمرير باستخدام شريط التمرير المعاق ، والتنقل النشط ، وبدء المحاذاة ، تم تكوينه عبر HTML Data-Attributes:

 < head >
  < link href =" /path/to/prokrutchik/styles.css " rel =" stylesheet " />
  < script src =" /path/to/prokrutchik/browser.js " defer > </ script >
</ head >

< body >
  < ul class =" scroller " data-scrollbar =" hidden " data-align =" start " >
    < img src =" example.png " data-anchor =" anchor1 " />
    < div data-anchor =" anchor2 " > </ div >
    < table data-anchor =" anchor3 " > </ table >
    <!-- ... -->
  </ div >
</ body >

قم بالتمرير مع نفس الإعدادات التي تم تكوينها عبر كائن التكوين:

 import { Scroller } from "prokrutchik" ;
import "prokrutchik/styles.css" ;

const myScroller = new Scroller ( {
  el : document . querySelector ( ".foo" ) ,
  scrollbar : "hidden" ,
  align : "start" ,
} ) ;