如何使滚动条居中？答案

【问题标题】：How to center scrollbar?如何使滚动条居中？
【发布时间】：2013-10-25 14:49:47
【问题描述】：

如何使 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(() 函数需要一个整数。

谢谢！

【问题讨论】：

这是您要找的吗？ jsfiddle.net/HSJft
@JasonP，是的，但是当 #mydiv 调整大小时（例如，当您调整浏览器大小时），滚动条不再居中。例如：jsfiddle.net/HSJft/1
我试过了，它似乎有效。 jsfiddle.net/vJrEN @UDB 是对的，我也改变了你的图片。

标签： javascript jquery html css scrollbar

【解决方案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>

【讨论】：

谢谢，但在#mydiv 中有一个图像映射 (w3schools.com/tags/tag_map.asp)。我是否必须将它们全部更改为宽度：继承？
@Jordy 很抱歉，但如果没有看到一个工作示例，我无法判断，您能否编辑您的问题并提供完整代码或修改您的代码
看，这不起作用：jsfiddle.net/HSJft/2 显示的图像与 div 的宽度和高度完全匹配，但我需要一个滚动条来显示图像的原始宽度和高度。
@Jordy 你想要垂直和水平滚动条吗？
只有水平滚动条就可以了！

【解决方案2】：

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

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

横轴：
$(scrollWrapper).scrollLeft(($(content).width() - $(scrollWrapper).width())/2);

【讨论】：