Updated April 19, 2023
Introduction to jQuery scrollLeft
The jQuery scrollLeft is the element to slide the application page from left to right. It is the function to roll the display screen horizontally to show the application information easily. It is the jQuery event to move the button left to the right side and display the web application data. It is the trigger function to place the left side and move horizontally to display hiding data. It is a button placed on the left side of the web application and slide toward the right side to display all web information.
Syntax
Given below is the syntax mentioned:
$("SELECTOR of application").scrollLeft();Explanation:
- The scrollLeft() method is using for horizontal roller using jQuery.
- The $(” SELECTOR of application “) is using for select the class, id, tags like h1, div, .class, and #id.
With position syntax is below.
$("SELECTOR of application").scrollLeft(select position range);Explanation:
- The scrollLeft(select position range) is using for the place button as per the user’s required position.
- The position is the place where the button is displayed and starts rolling horizontally.
With button triggered syntax is below.
<script>
$("button").click(function(){
$("h1").scrollLeft(50);
});
</script>
<h1>
The Information of the web application.
</h1>
<button> click </button>Explanation:
- The scrollLeft() method is place inside of the script tag in the htmlpage.
- The web application body part and selector are placed inside of the body part in the HTML page.
How scrollLeft Method Works in jQuery?
To jQuery scrollLeft user either download the jQuery library or use jQuery CDN version link.
- Download the development version or product version of jQuery from jQuery.com.
- The jQuery latest version place inside of the html page.
The jQuery link is below:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>The html page is created with filename and .html extension.
Example:
jqueryscroll.htmlThe add script tag inside of a head section of the HTML page.
<script>
Jquery scroll left syntax with required functions.
</script>Syntax placed inside of the script tag.
$("p").scrollLeft(50);Write required code inside of the body tag.
<body>
<p >
Write required code inside of the p tag.
</p>
</body>Combine the all procedure together to get jQuery scrollLeft.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").scrollLeft();
});
</script>
<style>
p{
border: 5px solid darkgrey;
width: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
</p>
</body>
</html>Examples
Given below are the examples mentioned:
Example #1
The basic jQuery scrollLeft example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").scrollLeft();
});
</script>
<style>
p{
border: 5px solid darkgrey;
width: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
The jqueryscrollleftis functiontorollthe displayscreenhorizontallytoshowthe applicationinformationeasily.
</p>
</body>
</html>Output:
Explanation:
- The scrollLeft() method used inside of the jQuery function using selector (“p”).
- The horizontal bar display in the output is known as a jQuery scrollLeft.
Example #2
With position example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").scrollLeft(80);
});
</script>
<style>
p{
border: 5px solid darkgrey;
width: 120px;
overflow: auto;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
Thejqueryscrollleftisfunctiontorollthedisplayscreenhorizontallytoshowthe applicationinformationeasily.
</p>
</body>
</html>Output:
Explanation:
- The scrollLeft(80) method used inside of the jQuery function with selector (“p”).
- The horizontal bar displays in the output with some space from the left side.
- The scroll bar set the position (80) with method.
Example #3
With button example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
$("p").scrollLeft(80);
});
});
</script>
<style>
p{
border: 5px solid darkgrey;
width: 120px;
overflow: auto;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
Thejqueryscrollleftisfunctiontorollthedisplayscreenhorizontallytoshowthe applicationinformationeasily.
</p>
<input type = "button" value = "click here">
</body>
</html>Output:
Explanation:
- The scrollLeft(80) method used inside of the jQuery function with selector (“p”).
- The triggered function used with the button and set the position.
- After clicking the button, the horizontal bar display some space from the left side.
Example #4
With vertical scroll example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
$("p").scrollLeft(80);
});
});
</script>
<style>
p{
border: 5px solid darkgrey;
height: 80px;
width: 120px;
overflow: auto;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
Thejqueryscrollleftisfunctiontorollthedisplayscreenhorizontallytoshowthe applicationinformationeasily.
</p>
<input type = "button" value = "click here">
</body>
</html>Output:
Explanation:
- The scrollLeft(80) method used inside of the jQuery function with selector (“p”).
- Then after clicking the button the horizontal bar display some space from the left side.
- The width and height are set with some required style and placed inside the head tag.
- The vertical and horizontal jQuery scroll display in the output.
Example #5
With image example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
$("p").scrollLeft(80);
});
});
</script>
<style>
p{
border: 5px solid darkgrey;
height: 250px;
width: 250px;
overflow: auto;
background-color: yellow;
}
</style>
</head>
<body>
<p>
The jqueryscrollleftis elementtoslide theapplicationpagefrom lefttoright.
Thejqueryscrollleftisfunctiontorollthedisplayscreenhorizontallytoshowthe applicationinformationeasily.
<img src = "first.jpg ">
</p>
<input type = "button" value = "click here">
</body>
</html>Output:
Explanation:
- Method used inside of the jQuery function with selector (“p”).
- The triggered function is used with the button and sets the position of the scroll button.
- After clicking the button the horizontal bar display some space from the left side.
- The images, tables, multiple functions, and information can display.
- In the above output, you can show the web data and image and display.
Conclusion
It is an adjustable, user-friendly, and attractive function of the web application. It is making space-saving, elegant, and readable websites, and web applications. It is a horizontal scrollbar to display maximum information into minimum space in the websites. It is an important function for the navigation bar, thumbnail, and multiple tables in the web applications.
Recommended Articles
This is a guide to jQuery scrollLeft. Here we discuss the introduction, how scrollLeft method works in jQuery? and examples respectively. You may also have a look at the following articles to learn more –
