วิธี Window scrollBy()

คำนิยามและการใช้งาน

scrollBy() วิธีนี้จะเลื่อนเอกสารไปยังพิกเซลที่กำหนด

คำเตือน:เพื่อที่จะให้ scrollBy() วิธีทำงาน บนเอกสารต้องใหญ่กว่าหน้าจอ และตาแวะต้องปรากฏอยู่。

ดูเพิ่มเติม:

วิธี scrollTo()

ตัวอย่าง

ตัวอย่าง 1

เลื่อนตามแนวนอกเครื่องมือ 100px:

window.scrollBy(100, 0);

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เลื่อนตามแนวตั้ง 100px:

window.scrollBy(0, 100);

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เลื่อนขึ้นข้างลงเอกสาร:

<button onclick="scrollWin(0, 50)">Scroll down</button>
<button onclick="scrollWin(0, -50)">Scroll up</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

ทดลองด้วยตัวเอง

ตัวอย่าง 4

เลื่อนข้างขวาข้างซ้ายเอกสาร:

<button onclick="scrollWin(100, 0)">Scroll right</button>
<button onclick="scrollWin(-100, 0)">Scroll left</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

ทดลองด้วยตัวเอง

คำสั่ง

window.scrollBy(x, y)

หรือ：

scrollBy(x, y)

ตัวแปร

ตัวแปร รายละเอียด
x

จำเป็น จำนวนพิกเซลที่ต้องการเลื่อน (ตามระดับนอกเครื่องมือ)。

เมื่อค่าเพิ่มขึ้นมุมขวาเลื่อนไปทางขวา ค่าลดลงเลื่อนไปทางซ้าย。
y

ข้อบังคับ จำนวนพิกเซลที่ต้องการเลื่อน (ตามแนวตั้ง)

ค่าบวกเลื่อนลง ค่าลบเลื่อนขึ้น

ค่าที่คืนค่า

ไม่มีสิ่งใด

การสนับสนุนเบราเซอร์

ทุกเบราเซอร์ทุกครั้งสนับสนุน scrollBy()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน