เว็บไซต์อย่างเป็นทางการ: http://iscrolljs.com/
โครงสร้าง DOM ที่ง่ายที่สุดของ IsCroll:
<div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
เริ่มต้น isCroll
var myscroll = new iScroll ('#wrapper', ตัวเลือก);เริ่มต้นการตั้งค่า
เริ่มต้นการตั้งค่าตัวอย่างการใช้งาน:
var myscroll = new iScroll ('#wrapper', {mousewheel: true, scrollbars: true});รายการการตั้งค่า:
เป็นของ | ชื่อแอตทริบิวต์ | อธิบาย | ค่าเริ่มต้น |
|---|---|---|---|
ห้องสมุดหลัก คนขี้ขลาด | ตัวเลือก usetransform | ไม่ว่าจะใช้คุณสมบัติการแปลงของ CSS3 | จริง |
ตัวเลือกการใช้งาน | ไม่ว่าจะใช้คุณสมบัติการเปลี่ยนผ่านของ CSS3 มิฉะนั้นจะใช้ RequestAnimationFram แทน | จริง | |
ตัวเลือก hwcompositing | ไม่ว่าจะเปิดใช้งานการเร่งฮาร์ดแวร์ | จริง | |
ตัวเลือก | ไม่ว่าจะเปิดใช้งานเอฟเฟกต์แอนิเมชั่นยืดหยุ่นให้ปิดเพื่อเร่งความเร็ว | จริง | |
คุณสมบัติพื้นฐาน คุณสมบัติพื้นฐาน | ตัวเลือก click | ไม่ว่าจะเปิดใช้งานเหตุการณ์คลิกหรือไม่ ขอแนะนำให้ปิดตัวเลือกนี้และเปิดใช้งานกิจกรรมแตะที่กำหนดเอง (ตัวเลือก TAP) | เท็จ |
ตัวเลือก DisableMouse | ไม่ว่าจะปิดการตรวจจับเหตุการณ์เมาส์ หากคุณรู้ว่าจะต้องใช้แพลตฟอร์มใดคุณสามารถเปิดใช้งานได้ | เท็จ | |
ตัวเลือก disablepointer | ไม่ว่าจะปิดการตรวจจับเหตุการณ์ตัวชี้ หากคุณรู้ว่าจะต้องใช้แพลตฟอร์มใดคุณสามารถเปิดใช้งานได้ | เท็จ | |
ตัวเลือก DisableTouch | ไม่ว่าจะปิดการตรวจจับเหตุการณ์แบบสัมผัส หากคุณรู้ว่าจะต้องใช้แพลตฟอร์มใดคุณสามารถเปิดใช้งานได้ | เท็จ | |
ตัวเลือก | เมื่อใช้แกนแนวนอนของ Iscroll ในการม้วนหากคุณต้องการใช้แกนแนวตั้งของระบบเพื่อม้วนและมีผลกับแกนแนวนอนโปรดเปิด การสาธิตเหตุการณ์ passthrough | เท็จ | |
ตัวเลือก FreesCroll | ส่วนใหญ่จะใช้เมื่อทั้งขึ้น, ลง, ซ้าย, ซ้ายและขวาจะมีผลและสามารถเลื่อนไปในทิศทางใดก็ได้ ตัวอย่างการเลื่อนม้วน 2d | เท็จ | |
ตัวเลือก | ผูกเหตุการณ์สำคัญ การผูกกุญแจ | เท็จ | |
ตัวเลือก | ล้อเมาส์ย้อนกลับ | เท็จ | |
ตัวเลือก momentum | ไม่ว่าจะเปิดแอนิเมชั่นเริ่มต้นหรือไม่ให้ปิดเพื่อปรับปรุงประสิทธิภาพ | จริง | |
ตัวเลือก Mousewheel | ไม่ว่าจะฟังเหตุการณ์ล้อเมาส์ | เท็จ | |
ตัวเลือก preventdefault | ไม่ว่าจะบล็อกเหตุการณ์เริ่มต้น | จริง | |
ตัวเลือก scrollbars | ไม่ว่าจะแสดงแถบเลื่อนเริ่มต้น | เท็จ | |
ตัวเลือก ตัวเลือก | คุณสามารถตั้งค่าได้ว่าจะแสดงแถบเลื่อนแนวนอนหรือแนวตั้ง | scrollx false จริงใจ | |
Options.tap | ไม่ว่าจะเปิดใช้งานกิจกรรมแตะที่กำหนดเอง คุณสามารถปรับแต่งชื่อเหตุการณ์แตะ | เท็จ | |
แถบเลื่อน แถบเลื่อน | ตัวเลือก scrollbars | ไม่ว่าจะแสดงแถบเลื่อนเริ่มต้น | เท็จ |
ตัวเลือก fadescrollbars | ไม่ว่าจะจางลงแถบเลื่อนหรือไม่ให้ปิดเพื่อเร่งความเร็ว | จริง | |
ตัวเลือก interactivescrollbars | ผู้ใช้สามารถลากแถบเลื่อนได้ไหม | เท็จ | |
ตัวเลือก. resizescrollbars | ไม่ว่าจะแก้ไขขนาดของแถบเลื่อนขอแนะนำให้เปิดใช้งานเมื่อปรับแต่งแถบเลื่อน | เท็จ | |
ตัวเลือก shrinkscrollbars | ไม่ว่าจะหดแถบเลื่อนเมื่อเลื่อนเกินขอบเขตการเลื่อน 'คลิป': crop the scrollbar beyond 'สเกล': แถบเลื่อนสัดส่วนตามสัดส่วน (ใช้ทรัพยากร CPU) เท็จ: ไม่มีการหดตัว | เท็จ | |
ตัวเลือก indicators | แนะนำวิธีการเลื่อน ISCroll การใช้งานพื้นฐานของแถบเลื่อน | ||
ตัวเลือก indicators.el | สร้างคอนเทนเนอร์สำหรับแถบเลื่อน องค์ประกอบแรกในคอนเทนเนอร์คือตัวบ่งชี้ ตัวอย่างเช่น: ตัวบ่งชี้: { EL: Document.getElementById ('ตัวบ่งชี้') - ตัวบ่งชี้: { El: '#Indicator' - | ||
ตัวเลือก indicators.ignoreboundaries | ไม่ว่าจะเพิกเฉยต่อขอบเขตคอนเทนเนอร์ ตั้งค่าเป็นจริงเพื่อตั้งค่าความเร็วในการเลื่อน การสาธิต Parallelax | เท็จ | |
ตัวเลือก indicators.listenx ตัวเลือก indicators.listeny | ตัวบ่งชี้ตรวจสอบการเลื่อนของทิศทางนั้นซึ่งสามารถตั้งค่าเป็นทิศทางเดียวหรือสองทิศทาง | จริง | |
ตัวเลือก indicators.speedratiox ตัวเลือก indicators.speedratioy | ความเร็วของตัวบ่งชี้ที่สัมพันธ์กับแถบเลื่อนหลัก | 0 | |
ตัวเลือก indicators.fade ตัวเลือก indicators.inateractive ตัวเลือก indicators.resize ตัวเลือก indicators.shrink | การตั้งค่าเช่นแถบเลื่อน การสาธิตขั้นต่ำ | ||
ตัวเลือก | iscroll-probe.js จำเป็นต้องมีผล probetype: 1 ทริกเกอร์เมื่อการเลื่อนไม่ว่าง probetype: 2 ทริกเกอร์ทุกครั้งเมื่อเลื่อน probetype: 3 ทริกเกอร์หนึ่งครั้งต่อการเลื่อนพิกเซล | ||
สแน็ปหน้าแยก | ตัวเลือก | แยกคอนเทนเนอร์โดยอัตโนมัติเพื่อสร้างผลกระทบของโคมไฟหมุน ฯลฯ ตัวเลือก SNAP: จริง // แยกโดยอัตโนมัติตามขนาดคอนเทนเนอร์ ตัวเลือก | เท็จ |
ซูม ซูม | ตัวเลือก zoom | ไม่ว่าจะเปิดซูม เป็นการดีที่สุดที่จะใช้ iscroll-zoom.js หากกำลังขยายเบลอคอนเทนเนอร์แหล่งที่มาสามารถกำหนดได้ 2 เท่าของขนาดและจากนั้นสเกล (0.5) การสาธิตซูม | เท็จ |
ตัวเลือก zoommax | ระดับซูมสูงสุด | 4 | |
ตัวเลือก zoommin | ระดับซูมขั้นต่ำ | 1 | |
ตัวเลือก startzoom | ระดับเริ่มต้น | 1 | |
ตัวเลือก | การกระทำของลูกกลิ้ง ตั้งค่าเป็น 'ซูม' คุณสามารถซูมด้วยล้อเลื่อน | ไม่ได้กำหนด | |
การตั้งค่าเพิ่มเติม | ตัวเลือก bindtowrapper | ไม่ว่าจะหยุดการเลื่อนเมื่อเคอร์เซอร์หรือสัมผัสเกินกว่าภาชนะ | เท็จ |
ตัวเลือกการตีพิมพ์ | เอฟเฟกต์แอนิเมชั่นยืดหยุ่น เอฟเฟกต์ที่ตั้งไว้ล่วงหน้า: 'กำลังสอง', 'วงกลม', 'back', 'ตีกลับ', 'ยืดหยุ่น' (สองสุดท้ายไม่สามารถแสดงออกผ่าน CSS3) คุณยังสามารถปรับแต่งเอฟเฟกต์ การตีกลับ: { สไตล์: 'ลูกบาศก์เบส (0,0,1,1)', // css3 FN: ฟังก์ชั่น (k) {return k; } // เมื่อใช้ requestanimationframe - | 'วงกลม' | |
ตัวเลือก | จำนวนมิลลิวินาทีของแอนิเมชั่นยืดหยุ่นมีอายุการใช้งาน | 600 | |
ตัวเลือกการ deceleration | การชะลอการชะลอตัวของโมเมนตัม ยิ่งเร็วเท่าไหร่ราคาที่แนะนำก็คือไม่เกิน 0.01 | 0.0006 | |
ตัวเลือก mousewheelspeed | ความเร็วล้อเมาส์ | ||
ตัวเลือก PreventDefaultException | รายการองค์ประกอบใดที่ไม่บล็อกเหตุการณ์เริ่มต้น | {tagname: /^(อินพุต | textarea | ปุ่ม | เลือก) $ /} | |
ตัวเลือก | คำนวณช่วงเวลา isCroll ใหม่เมื่อปรับขนาดหน้าต่าง | 60 | |
การผูกมัดคีย์ | ตัวเลือก | ฟังเหตุการณ์สำคัญในการควบคุม isCroll ตัวอย่างเช่น: KeyBindings: { หน้า: 33, Pagedown: 34, สิ้นสุด: 35, หน้าแรก: 36, ซ้าย: 37, ขึ้น: 38, ขวา: 39, ลง: 40 - | |
isCroll5 API:
เป็นของ | ชื่อวิธี | อธิบาย |
|---|---|---|
การเลื่อน | Scrollto (x, y, เวลา, ผ่อนคลาย) | เลื่อนไปที่: x, y, เหตุการณ์, วิธีการผ่อนคลาย x: int y: int เวลา: int ผ่อนคลาย: กำลังสอง | วงกลม กลับ | ตีกลับ ยืดหยุ่น ดูวัตถุ iscroll.utils.ease ตัวอย่าง: myscroll.scrollto (0, -100, 1,000, iscroll.utils.ease.elastic); |
Scrollby (x, y, เวลา, ผ่อนคลาย) | เลื่อนไปที่ที่ไหนสักแห่งเมื่อเทียบกับตำแหน่งปัจจุบัน ส่วนที่เหลือเหมือนกับข้างบน | |
Scrolltoelement (El, Time, Offsetx, Offsety, Easying) | เลื่อนไปที่องค์ประกอบ EL คือพารามิเตอร์ที่ต้องการ Offsetx/Offsety: การกระจัดเทียบกับองค์ประกอบ EL ตั้งค่าเป็นจริงให้เป็นศูนย์กลางของหน้าจอ เลื่อนไปที่องค์ประกอบ | |
สแน็ปหน้าแยก | gotopage (x, y, เวลา, ผ่อนคลาย) | แยกหน้าตามตัวเลือก SNAP และข้ามไปที่หน้าในแนวนอนหรือแนวตั้ง XY สามารถมีผลในเวลาเดียวกัน ใช้ร่วมกับ opotions.snap |
ต่อไป() ก่อนหน้า () | หน้าก่อนหน้าหน้าถัดไป ใช้ร่วมกับ opotions.snap | |
ซูม | ซูม (สเกล, x, y, เวลา) | ปรับขนาดภาชนะ สเกล: ปัจจัยการปรับขนาด |
รีเฟรช | รีเฟรช () | รีเฟรช isCroll |
ทำลาย | ทำลาย() | ทำลาย IsCroll และบันทึกทรัพยากร |
กิจกรรม Iscroll:
beforescrollstart | ผู้ใช้คลิกบนหน้าจอ แต่ยังไม่ได้เริ่มต้นก่อนที่จะเลื่อน |
|---|---|
ม่านตา | ยกเลิกหลังจากเริ่มต้นการเลื่อน |
ม้วน | เริ่มเลื่อน |
การเลื่อน | การเลื่อน |
การเลื่อน | การเลื่อนสิ้นสุดลง |
สะบัด | แตะหน้าจอซ้ายและขวา |
ซูมสตาร์ | เริ่มการปรับขนาด |
ซูม | สิ้นสุดการซูม |
ตัวอย่างการใช้งานเหตุการณ์:
myscroll = ใหม่ iscroll ('#wrapper'); myscroll.on ('scrollend', dosomething);คุณสมบัติของ isCroll:
myscroll.x/y | ตำแหน่งปัจจุบัน |
|---|---|
myscroll.directionx/y | ทิศทางการเลื่อนของครั้งสุดท้าย (-1 ลง/ขวา, 0 ยังคงเป็นต้นฉบับ 1 ขึ้น/ซ้าย) |
myscroll.currentpage | ข้อมูล SNAP ปัจจุบัน |
myscroll.maxscrollxmyscroll.maxscrolly | myscroll.x/y เมื่อเลื่อนไปที่ด้านล่าง |