Window scrollBy() Methode

Definitie en gebruik

scrollBy() De methode scrolt het document naar het opgegeven aantal pixels.

Tip:Om te maken scrollBy() De methode werkt als het document groter is dan het scherm en de scrollbar zichtbaar is.

Zie ook:

scrollTo() Methode

Voorbeeld

Voorbeeld 1

Document scrolleer horizontaal 100px:

window.scrollBy(100, 0);

Probeer het zelf

Voorbeeld 2

Document scrolleer verticaal 100px:

window.scrollBy(0, 100);

Probeer het zelf

Voorbeeld 3

Document scrolleer naar boven en beneden:

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

Probeer het zelf

Voorbeeld 4

Document scrolleer naar links en rechts:

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

Probeer het zelf

Syntax

window.scrollBy(x, y)

of:

scrollBy(x, y)

Parameter

Parameter Beschrijving
x

Verplicht. Het aantal pixels dat moet worden gescrolld (horizontaal).

De waarde beweegt naar rechts, de negatieve waarde naar links.
y

Required. The number of pixels to scroll (vertically).

Positive value scrolls down, negative value scrolls up.

Return value

None.

Browser support

All browsers support scrollBy():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support