:: How to Build ::
- หลักการคร่าวๆ นะครับ เดี๋ยวตอนท้ายจะมี Full Code ให้
ฟังก์ชั่นหลักที่ใช้ในการ Scroll คือ window.scroll(0,currentpos)
ตัวแปร currentpos นั้นเป็นตำแหน่งที่เราต้องการให้มันเลื่อนไป การเพิ่มค่าในตัวแปรนี้ทีละนิดแล้วเรียกฟังก์ชั่น
window.scroll(0,currentpos) นี้ใหม่จะทำให้มันค่อยๆเลื่อนลง
<![CDATA[
window.scroll(0,currentpos)
]]>
- แต่อุปสรรคของ Script นี้มีอยู่ 2 ประการคือ
- พรอเพอร์ตีที่เก็บตำแหน่งของการ Scroll window ของ Internet Explorer และ Netscape ไม่เหมือนกัน
- ไม่มี พรอเพอร์ตี ที่เก็บความสูงของเอกสารทำให้ไม่รู้จุดสิ้นสุดของการ Scroll
- แก้ไขอุปสรรคประการแรก - ใช้ if (document.all) ตรวจสอบ Browser แล้วค่อยดึงค่าจาก พรอเพอร์ตีที่เหมาะสม
<![CDATA[
if (document.all)
currentpos=document.body.scrollTop+speed
else
currentpos=window.pageYOffset+speed
window.scroll(0,currentpos)
}
]]>
- แก้ไขอุปสรรคประการที่สอง - ใช้วิธีเก็บค่าตำแหน่งเก่าเอาไว้ แล้วรอให้ Scroll ไปอีก 1 Step
ค่อยเอาค่านี้มาเปรียบเทียบกับค่าปัจจุบัน ถ้าค่า 2 ค่านี้เท่ากันเมื่อไหร่ แสดงว่า Scroll มาจนถึงล่างสุดแล้วไม่สามารถเลื่อนต่อไปได้
<![CDATA[
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+speed
else
currentpos=window.pageYOffset+speed
window.scroll(0,currentpos)
}
else{
clearInterval(Tm);
}
}
]]>
- ดังนั้นเราจะต้องเก็บค่าตำแหน่งไว้ในตัวแปร 2 ตัว (ตำแหน่งเก่า และ ตำแหน่งปัจจุบัน) เพื่อการเปรียบเทียบดังกล่าว โดยสลับกันเก็บรอบละตัว เช่น รอบแรกเก็บไว้ใน curpos1 รอบที่ 2
curpos2 รอบที่ 3 curpos1 สลับกันเช่นนี้ไปเรื่อยๆ เมื่อเราเอา curpos1 และ curpos2 มาเปรียบเทียบกัน ก็จะรู้ได้ทันทีว่า
รอบที่ผ่านมา Scroll ได้หรือไม่ และการสลับตัวแปรเช่นนี้ จำเป็นต้องใช้เทคนิกเล็กๆน้อยๆมาช่วย โปรดสังเกต ตัวแปร alt ตัวแปรนี้ ถูกเปลียนค่า ทุกครั้งที่ฟังก์ชั่นทำงาน แต่จะวนอยู่แค่ 0 กับ 1 เท่านั้น
จากนั้นค่อยใช้ตัวแปร alt ไปเลือกว่าจะเก็บค่าตำแหน่งปัจจุบัน ใส่ตัวแปรไหน (และแน่นอนครับ ตัวแปรอีกตัวก็เป็นค่าตำแหน่งของรอบที่แล้วนั่นเอง)
<![CDATA[
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
]]>
- และส่วนสุดท้ายคือใน <Body> ให้ใส่ onload="Tm=setInterval('scrollwindow()',10)" เพื่อเรียกฟังก์ชั่นขึ้นมาทำงานครับ
|
