是否可以使用溢出来使 div 的滚动条居中：滚动答案

【问题标题】：Is it possible to center the scrollbar of a div with overflow:scroll是否可以使用溢出来使 div 的滚动条居中：滚动
【发布时间】：2013-01-21 19:35:55
【问题描述】：

.qsf-demo-canvas 
{ max-width: 100%;
max-height:600px;
overflow:scroll;}

是否可以使用overflow:scroll div 使水平滚动条居中。

如果内容比可用空间宽得多，则 div 内容默认居中？

用户应该仍然可以滚动。

谢谢

【问题讨论】：

它应该仍然可以被用户滚动？我问是因为在标题中你有hidden在css中你写auto在文本中你写scroll
对不起……咖啡太多了！！！
它会溢出：自动 - 或者我想滚动
您可以编辑您的问题。
抱歉 - 我现在更新了问题。

标签： html css web-applications telerik

【解决方案1】：

一些优化 - 将动画更改为 scrollLeft()。与 jQuery.slim 一起使用，根据 Chrome DevTools，速度要快得多。

var myDiv = $("#Mydiv");
var scrollto = myDiv.offset().left + (myDiv.width() / 2);
myDiv.scrollLeft(scrollto);

【讨论】：

【解决方案2】：

我成功了：

jQuery(document).ready(function() {
  jQuery(window).resize(function() {
    var myDiv = jQuery("#myDiv"),
        myChild = myDiv.find("> *:first-child");
    myDiv.animate({
      scrollLeft: (myChild.width() - myDiv.width()) / 2
    }, {
      duration: 0
    });
  });

  jQuery(window).resize();
});

【讨论】：

当滚动相对于一个子元素时效果很好，例如 div 内的图像（并且该图像更大）。结合其他答案，scrollLeft值可以是let scrollto = (img1.width() - div1.width()) / 2;

【解决方案3】：

在 JS 中是可能的：这会将 div 的内部滚动滚动到它的水平中间

var myDiv = $("#Mydiv");
var scrollto = myDiv.offset().left + (myDiv.width() / 2);
myDiv.animate({ scrollLeft:  scrollto});

希望对你有所帮助。

【讨论】：

这会将内容的左侧置于中心位置。我认为海报想要的是将中心放在中心。
这个想法是正确的，只是需要更多的数学才能使其居中