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>

Answer 2

简单的解决方案： https

://jsfiddle.net/HSJft/21/垂直滚动：
$(scrollWrapper).scrollTop(($(content).height() - $(scrollWrapper).height())/2);

水平滚动：
$(scrollWrapper).scrollLeft(($(content).width() - $(scrollWrapper).width())/2);