如何居中滾動條？

這是我有：

<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

如何居中滾動條？

回答

相關問題