How to position horizontal scroll bar at center of DIV?

jQueryWeb DevelopmentFront End Technology

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:

Live Demo

<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>
raja
Alex Onsman
Published on 17-Dec-2017 14:32:38
Previous Page Print Page
Next Page  
Advertisements