如何将水平滚动条放置在DIV的中心?

要将水平滚动条放置在div的中心,请使用向左滚动键。您可以尝试运行以下代码以将水平滚动条放置在div中。

示例

滚动条位于div的中心:

<html>
   <head>
   
      <title>jQuery Scroll</title>
      <script src = "https://cdn.staticfile.org/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>