- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to position horizontal scroll bar at center of DIV?
To position horizontal scroll bar at center of div, use the scrollleft. You can try to run the following code to position horizontal scroll bar in div.
Example
The scroll bar is positioned at center of div:
<html> <head> <title>jQuery Scroll</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(document).ready(function(){ var outerContent = $('.demo'); var innerContent = $('.demo > div'); outerContent.scrollLeft( (innerContent.width() - outerContent.width()) / 2); }); }); </script> <style> html, body, div { margin:0; padding:0; } .demo { width:400px; overflow-x:scroll; } #viewContainer { height:120px; width:1000px; display:table; } .myclass { width:250px; height:100%; display:table-cell; border:2px solid blue; } </style> </head> <body> <div class="demo"> <div id="viewContainer"> <div class="myclass" id="farLeft">Far left</div> <div class="myclass" id="left">left</div> <div class="myclass" id="center">center</div> <div class="myclass" id="right">right</div> <div class="myclass" id="farRight">Far right</div> </div> </div> </body> </html>
Advertisements