HTML Window scrollBy() method
Last Updated :
15 Jun, 2023
The window.scrollBy() method is used to scroll the document by a given number of pixels.
Syntax:
window.scrollBy( xcoordinate, ycoordinate );
or
window.scrollBy(options);
Parameters: This method accepts two parameters as mentioned above and described below:
- x-coordinate: It is the horizontal pixel value that indicates how much you want to scroll the document (in terms of px).
- y-coordinate: It is the vertical pixel value that indicates how much you want to scroll the document (in terms of px).
Note: You can find these options in options in the ScrollToOptions dictionary.
Example 1: Scroll horizontally
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM window scrollby() method
</ title >
< style >
body {
width: 5000px;
}
a:focus {
background-color: magenta;
}
button {
position: fixed;
}
</ style >
</ head >
< body >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Window.scrollBy() method</ h2 >
< button onclick = "scrollby()" >
Scroll horizontally!
</ button >
< br >< br >
< script >
function scrollby() {
window.scrollBy(100, 0);
}
</ script >
</ body >
</ html >
|
Output:
Example 2: Using options
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Window scrollBy() method
</ title >
< style >
body {
width: 5000px;
height: 5000px;
}
a:focus {
background-color: magenta;
}
button {
position: fixed;
}
</ style >
</ head >
< body >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 >HTML DOM Window.scrollBy() method</ h2 >
< div >
< button onclick = "scrollWin(0, 50)" >
Scroll down
</ button >
< br >< br >
< button onclick = "scrollWin(0, -50)" >
Scroll up
</ button >
< br >< br >
< button onclick = "scrollWin(50, 0)" >
Scroll right
</ button >
< br >< br >
< button onclick = "scrollWin(-50, 0)" >
Scroll left
</ button >
</ div >
< script >
function scrollWin(x, y) {
window.scrollBy(x, y);
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by HTML DOM Window scrollBy() method are listed below:
- Google Chrome 45
- Firefox
- Opera 32
Share your thoughts in the comments
Please Login to comment...