- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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>
- Related Articles
- How to find horizontal Scroll Position using jQuery?
- How to scroll to element in horizontal div using jQuery?
- How to find left position of element in horizontal scroll container using jQuery?
- Center Triangle at Bottom of Div in HTML with CSS
- How to set scroll left position in jQuery?
- How to enable vertical scroll bar for android webview?
- How to center a "position: absolute" element?
- How to set div position relative to another div in JavaScript?
- How to add scroll bar to an image in JavaFX?
- How to make a div center align in HTML?
- How to scroll a specific DIV using Selenium WebDriver with Java?
- How do you check scroll position using selenium?
- How to center a div on the screen using jQuery?
- How to Create an On Scroll Fixed Navigation Bar with CSS?
- How to create horizontal lines for each bar in a bar plot of base R?

Advertisements