Updated April 18, 2023
Introduction to jQuery scroll horizontal
In jQuery, scroll horizontal is defined as scrolling the selected scrollbar to the left which means the scrollbar will be moved horizontally using an in-built function in jQuery known as scrollLeft() function which is used for scrolling horizontally. In general, scrolling horizontally in jQuery is defined as moving the tab or button cursor left to right and vice versa which moves horizontally in the page using a built-in function in jQuery called as scrollLeft() which scrolls the button scrollbar too and from that means right to left or vice versa using this function for scrolling horizontally for any selected or matched elements.
Syntax:
$(selector_tag).scrollLeft(position of selector tag)In this above syntax for scrollLeft() in jQuery uses “selector_tag” for selecting a particular tag on which we are trying to apply the scroll it will usually be a button or scrollbar cursor in such case.
Parameters:
- Selector_tag: this is not a parameter but it is a tag on which we are applying this scrollLeft() function for making the tag generate an event for scrolling the tag to and fro horizontally.
- Position of selector tag: This parameter is optional. The position is known when the scrollbar is scrolled horizontally in pixels units. It usually provides the pixel number at which the scrollbar is stopped while scrolling horizontally.
This syntax of the scrollLeft() function returns the position of the scrollbar in pixels for the first matched element or the selected tag. Sometimes the position parameter is specifically used for setting the position of the scrollbar which sets the position in pixel for the entire matched element or the selected tag. This scrollLeft() function always returns the position 0 as pixel number when the scrollbar is at the left most of the slide bar in any page in jQuery.
Working of jQuery scroll horizontal
In jQuery, we can make any element tag move horizontally using the built-in function scrollLeft() function for scrolling the scrollbar horizontally according to either the position which is set as the parameter or without setting the position which would specify the position in pixel number of the scrollbar. In general, scrollLeft() function working is simple which sets or returns the position of scrollbar which moves horizontally for any matched elements or the selected tag for which this function is applied and it returns 0 as position whenever the elements which are selected are not scrollable when used with this scrollLeft() function.
Examples of jQuery scroll horizontal
Let us consider a simple example for demonstrating the use of the scrollLeft() function for scrolling the scrollbar horizontally without passing any parameter.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of scrollLeft() function for scrolling horizontally </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
alert($("div").scrollLeft() + " px");
});
});
</script>
<style>
div {
border: 1px solid red;
width: 140px;
height: 120px;
overflow: auto
}
</style>
</head>
<body>
<p> To scroll the scrollbar horizontally and to know the position of the scrollbar. </p>
<br>
<p> Click on the below given button </p>
<div>
EDUCBA is an online training provider, teaches you real world skill on everything from Investment Banking to Programming to Project Management to Design & many more: pneudsfkjdfdfdfgkfgicsilgfglicovolcanoconiosis.
</div>
<br>
<button> Click me! </button>
</body>
</html>Output:
In the above example, we can see we have first written the text in such a way that would be displayed within the box with some properties. In this, we are using the “div” tag and specifying some CSS properties such as a box within which the text would be displayed according to mentioned properties such as its border, the width, and height for the box to be displayed will be specified and then we are applying the scrollLeft() function to this “div” tag so that the scrollbar will be displayed when we are viewing the text within the box and this can be seen in the first screenshot. This scrollLeft() function will provide the scrollbar which will move horizontally and when you click on the button “click me’ it will display the pixel number at which the scrollbar points to or stops and this can be seen in the second screenshot and lastly we can also see when the scrollbar is at the left of the box the pixel number that is displayed is “0” zero which can be seen in the third screenshot.
Example #2
Let us consider another example for demonstrating the scrollLeft() function in the below section by passing a parameter which means setting the position from where to start the scrolling.
Code:
<html>
<head>
<title> ScrollLeft() function in jQuery for scrolling horizontally </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div.display").scrollLeft( 100 );
$("div.display").mousemove(function () {
var left = $("div.display").scrollLeft();
$("#position_pixel").html("Pixel number: <span>" + left + "</span>.");
});
});
</script>
<style>
div.display {
background:orange none repeat scroll 0 0;
border:5px solid red;
margin:8px;
padding:8px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
div.position_pixel {
margin:8px;
width:150px;
height:50px;
margin:5px;
float:center;
background-color:cyan;
}
p {
margin:15px;
padding:10px;
border:3px solid black;
width:800px;
height:800px;
}
</style>
</head>
<body>
<div class = "display"><p> Welcome Educba! </p></div>
<span>Scroll horizontal scrollbar to view the pixel number where the scrollbar has been stopped:</span>
<div class = "position_pixel"><span id = "position_pixel"></span></div>
</body></html>Output:
In the above example, we can see similar to the first example we have written a simple message within the box which is created using the properties for displaying the message which is specified within the “div” tag and we are displaying this in the box format with the scrollbar that moves horizontally. This is done by the scrollLeft() function but the difference is that here we are setting the position of the scrollbar where this example is executed it will first show the pixel starting from the pixel number 100 which is passed as a parameter to the scrollLeft() function and the output is as shown in the first screenshot. Then when we move the scrollbar to the extreme left it will display pixel number as “0” as shown in the second screenshot and when it is moved to the extreme right then it will display the pixel number of the end of the box which is shown in the third screenshot.
Conclusion
In this article, we conclude that we have used the scrollLeft() function in jQuery to scroll horizontally which can be very useful for scrolling typical pages horizontally which is mainly used in presenting any gallery of images on any of the websites. This type of function is very useful in huge Data tables and hence the developers can make use of this in-built function in jQuery easily as shown in the above article.
Recommended Articles
This is a guide to jQuery scroll horizontal. Here we discuss the Introduction, syntax, How the scrollLeft() function works for scrolling horizontally in jQuery? and examples. You may also have a look at the following articles to learn more –
