页面如何默认div的横向滚动条居中或者是居右呢？请各位高手指点！

Posted 2023-05-09

用js控制。先取得div的宽假设为(dW)，再取得div可见宽假设为(sW).
(dW-sW)/2即是滚动条居中的x坐标。div的scrollX=(dW-sW)/2，即是居中，div的scrollX=dW-sW即是居右。div的scrollX=0即是居左。 参考技术A overflow-y:scroll竖的这样写，
横的overflow-x:scroll这样写 参考技术B align=center；align=right 参考技术C 滚动条居中是什么概念？追问

如上图所以默认滚动条的位置

是否可以使div溢出的滚动条居中：滚动

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

是否可以使水平滚动条居中溢出：滚动div。

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

用户仍然可以滚动浏览。

谢谢

答案

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

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

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

另一答案

我成功了：

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

另一答案

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

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