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/

///

Answer 2

简易解决方案： https://jsfiddle.net/HSJft/21/

垂直滚动：
$(scrollWrapper).scrollTop(($(content).height() - $(scrollWrapper).height())/2);

横向滚动：
$(scrollWrapper).scrollLeft(($(content).width() - $(scrollWrapper).width())/2);

如何居中滚动条？

2 个答案: