jQuery | scrollLeft（）及其示例-yiteyi-C++库

scrollLeft（）方法是jQuery中的一个内置方法，用于返回或设置滚动条的水平位置。

null

语法：

$(selector).scrollLeft(position)

参数： 此方法接受单个参数位置这是可选的。它用于以像素为单位指定水平滚动条的位置。

返回值： 此方法返回滚动条的位置。

下面的示例演示了jQuery中的scrollLeft（）方法。

例1：

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               title                               >scrollLeft method</                               title                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <!-- jQuery code to show the working of this method -->                   
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         $("button").click(function() {                   
                                         alert($("div").scrollLeft() + " px");                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         border: 1px solid black;                   
                                         width: 140px;                   
                                         height: 120px;                   
                                         overflow: auto                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <                               div                               >                   
                                         welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome                   
                                         to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to                   
                                         GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to                   
                                         GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to GeeksforGeeks!.                   
                                         </                               div                               >                   
                                         <                               br                               >                   
                                         <!-- click on this button to get the position of the scrollbar -->                   
                                         <                               button                               >Click Here!</                               button                               >                   
                             
                                         </                               body                               >                   
                             
                     </                               html                               >                   

输出： 单击按钮之前：图片[1]-jQuery | scrollLeft（）及其示例-yiteyi-C++库返回的位置如箭头所示：图片[2]-jQuery | scrollLeft（）及其示例-yiteyi-C++库

例2：

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               title                               >scrollLeft method</                               title                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <!-- jQuery code to show the working of this method -->                   
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         $("button").click(function() {                   
                                         $("div").scrollLeft(100);                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         border: 1px solid black;                   
                                         width: 140px;                   
                                         height: 120px;                   
                                         overflow: auto                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <                               div                               style                               =                               ""                               >                   
                                         welcome to GeeksforGeeks!. Welcome to GeeksforGeeks1.welcome                   
                                         to GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to                   
                                         GeeksforGeeks!. Welcome to GeeksforGeeks!.welcome to                   
                                         GeeksforGeeks!. Welcome to GeeksforGeeks1. Welcome to                   
                                         GeeksforGeeks!.                   
                                         </                               div                               >                   
                                         <                               br                               >                   
                             
                                         <!-- click on this button to get the position                   
                                         of the scrollbar -->                   
                                         <                               button                               >Click Here!</                               button                               >                   
                                         </                               body                               >                   
                     </                               html                               >                   