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

Question

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

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

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

用户应该仍然可以滚动。

谢谢你

Answer 1

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

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

我希望这会对你有所帮助。

Answer 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();
});

Answer 3

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

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