如何居中滚动条?

乔迪

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

谢谢!

乌迪特·巴德瓦吉

这是您的解决方案,我已经检查了所有小于图像宽度的可能宽度。甚至用塑料尺..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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何居中滚动条?

来自分类Dev

如何隐藏溢出:在居中的div中滚动滚动条

来自分类Dev

如何在HorizontalScrollView Android中居中滚动条

来自分类Dev

如何在HorizontalScrollView Android中居中滚动条

来自分类Dev

如何居中单击并在中间拖动滚动条

来自分类Dev

如何激活滚动条?

来自分类Dev

如何调整滚动条?

来自分类Dev

如何使滚动条变宽?

来自分类Dev

如何在JPanel中为长JComponent添加滚动条?如何居中JComponent?

来自分类Dev

如何在JPanel中为长JComponent添加滚动条?如何居中JComponent?

来自分类Dev

如何在较小的屏幕上居中放置图像而不创建水平滚动条?

来自分类Dev

如何向下滚动滚动条

来自分类Dev

出现滚动条上的文本居中跳转

来自分类Dev

放大时使整个页面(水平滚动条位置)居中

来自分类Dev

垂直居中全屏div和滚动条

来自分类Dev

如何获得AutoScroll滚动条的厚度?

来自分类Dev

Bootstrap:如何禁用垂直滚动条?

来自分类Dev

如何设置AvalonEdit滚动条的样式

来自分类Dev

如何增加Datagrid滚动条的大小?

来自分类Dev

如何强制显示垂直滚动条?

来自分类Dev

如何删除页面上的滚动条?

来自分类Dev

如何启用此蚀滚动条?

来自分类Dev

如何隐藏UICollectionView的滚动条

来自分类Dev

如何使滚动条重叠页面内容

来自分类Dev

如何隐藏水平滚动条

来自分类Dev

如何使滚动条始终可见?

来自分类Dev

如何使用QScrollArea使滚动条出现

来自分类Dev

如何更改滚动条的拇指高度?

来自分类Dev

如何隐藏模式滚动条