如何居中滚动条？

这是我有：

<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（（）函数需要一个整数。

谢谢！

来源

2013-10-25 Jordy

这是你在找什么？ http://jsfiddle.net/HSJft/ –

@JasonP，是的，但是当#mydiv被调整大小（例如，当您调整浏览器的大小时），滚动条不再居中。检查这个例子：http://jsfiddle.net/HSJft/1/ – Jordy

我试过了，它似乎工作。 http://jsfiddle.net/vJrEN/ @UDB是对的我也改变了你的形象。 –

这里是你的解决方案，我已经用一切可能的宽度小于图像宽度，即使测量左，右侧滚动的空间检查它用塑料尺..LOL吧:)检查，如果双方都是平等的

http://jsfiddle.net/HSJft/5/

///

来源

2013-10-25 15:04:25 UDB

谢谢，但#mydiv里面有一个图像映射（http://www.w3schools.com/tags/tag_map.asp）。我是否必须将其全部更改为宽度：继承？ – Jordy

@Jordy m对不起，但我没有看到一个工作的例子可以告诉你，请编辑你的问题，并提供完整的代码或使你的代码小提琴 – UDB

看，这是行不通的：jsfiddle.net/HSJft/2图像显示为与div的宽度和高度完全匹配，但我需要一个滚动条来显示图像的原始宽度和高度。 – Jordy

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

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

水平滚动：
$(scrollWrapper).scrollLeft(($(content).width() - $(scrollWrapper).width())/2);

来源

2015-11-17 16:31:23

如何居中滚动条？

回答

相关问题