javascript - 如何使滚动条居中？

Question

如何使 div 的滚动条居中？

这是我的:

<div id="mydiv" style="width:1000px;overflow:auto;">
   <img src="..." style="width:100%;height:250px;" />
</div>

$(window).on('resize', function () {
    $('#mydiv').scrollLeft(
            $( "#mydiv" ).width() - $( "#mydiv" ).width()/2
    );
});

但这行不通。它不完全居中。太糟糕了，我不能设置百分比 50%。 scrollLeft(() 函数需要一个整数。

谢谢!

Answer 1

这是您的解决方案，我已经检查了所有可能小于图像宽度的宽度。甚至用塑料尺测量了滚动条左右两侧的空间..LOL。 :) 检查两边是否相等

http://jsfiddle.net/HSJft/5/

var outer=document.getElementById('mydiv').offsetWidth
var inner=document.getElementById('im').offsetWidth;
console.log(inner);
$('#mydiv').scrollLeft((inner-outer)/2)

<div id="mydiv" style="overflow:auto; overflow-y:hidden;width:300px">
   <img id="im" src="http://eofdreams.com/data_images/dreams/image/image-15.jpg" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>