jQuery scrollLeft Method
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
<!DOCTYPE html> <html> <head> <title>jQuery Demo example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $( "#scrollLeftExample" ).on( "click", function(event) { $("#myDiv").scrollLeft(50); }); }); </script> <style> .myClass{ border:1px solid red; background:green; width:300px; height:100px; overflow-x:scroll; } </style> </head> <body> <h4 ><a href="javascript:void(0);" id="scrollLeftExample">Click to run .scrollleft() Example </a></h4> <div id="myDiv" class="myClass"> <p style='width:400px;'> Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content.. </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>jQuery Demo example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $( "#scrollLeftExample" ).on( "click", function(event) { $("#myDiv").scrollLeft(50); }); }); </script> <style> .myClass{ border:1px solid red; background:green; width:300px; height:100px; overflow-x:scroll; } </style> </head> <body> <h4 ><a href="javascript:void(0);" id="scrollLeftExample">Click to run .scrollleft() Example </a></h4> <div id="myDiv" class="myClass"> <p style='width:400px;'> Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content.. Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content..Scroll left Demo..content.. </p> </div> </body> </html>
Copyrights@tutorialsplane.com