DIVをコンテナの中央に水平にスクロールするにはどうすればいいですか？

Question

私は2つのDIVを持つコンテナを持っています。私がボタンをクリックすると、黄色のDIVをコンテナの中に水平に配置しようとしています。ただし、ボタンを複数回クリックすると前後にスクロールし、手動でコンテナをスクロールしてボタンをクリックすると、黄色のDIVがスクロールされて表示されることはありません。

ここはjsfiddleです。ボタンを何度もクリックすると、前後にスクロールします。なぜそれがやるん？：その https://jsfiddle.net/nug4urna/

HTML：

<div id='container'> 
<div id='blue'></div> 
<div id='yellow'></div> 
</div> 
<div id='mybutton'> 
click to scroll yellow div into view 
</div> 
<div id='log'> 
</div> 

JAVSCRIPT：

function scrollDivIntoView(id) { 
     var elOffset = $(id).offset().left; 
     var elWidth = $(id).width(); 
     var containerWidth = $('#container').width(); 
     var offset = elOffset - ((containerWidth - elWidth)/2); 

     $('#container').scrollLeft(offset); 

     var _log = 'elOffset = ' + elOffset + '<br>'; 
     _log += 'elWidth = ' + elWidth + '<br>'; 
     _log += 'containerWidth = ' + containerWidth + '<br>'; 
     _log += 'offset = ' + offset; 

     $('#log').html(_log); 
} 

$(document).ready(function() { 
    $('body').on('click', '#mybutton', function(){ 
     scrollDivIntoView('#yellow'); 
    }); 
}); 

CSS：

#container{ 
    width:100%; 
    height:150px; 
    border:1px solid red; 
    display:inline-block; 
    white-space:nowrap; 
    overflow-y:hidden; 
    overflow-x:auto; 
} 
#blue{ 
    width:2000px; 
    height:100px; 
    background-color: blue; 
    margin:5px; 
    display:inline-block; 
} 
#yellow{ 
    width:200px; 
    height:100px; 
    background-color: yellow; 
    margin:5px; 
    display:inline-block; 
} 
#mybutton{ 
    margin-top:10px; 
    cursor:pointer; 
    background-color:black; 
    color:white; 
    width:400px; 
    padding:4px; 
    text-align:center; 
} 

Answer 1

最初の行をvar elOffset = $(id)[0].offsetLeft;に変更すると、元のコードはあらゆる状況で毎回動作します。

詳細については、以下を参照してください。 ``場合（elOffeset> containerWidth）{ ``べきであるならば（elOffset> containerWidth）{： https://javascript.info/size-and-scroll

Answer 2

はあなたが追加する必要があります、それを中央にあなたの黄色の容器に右の余白を設定して、右側を「パッド」して中央に置くことができます。私はあなたのフィドルを更新： https://jsfiddle.net/nug4urna/2/

#yellow{ 
    width:200px; 
    height:100px; 
    background-color: yellow; 
    margin:5px; 
    display:inline-block; 
    margin-right: 100%; 
} 

計算が各クリック後に変更var elOffset = $(id).offset().left;に基づいているため、また、それを前後にジャンプ理由があります。オフセットがコンテナの幅より大きいかどうかを確認するためにフィディルドを更新しました。それが少ない場合は、更新を防ぎます。

if (elOffset > containerWidth) { 
    $('#container').scrollLeft(offset); 
    } 

UPDATE：これは最初の頃に動作しますが、ユーザーがスクロール場合は計算が非常に適切ではありません 。スクロールバーが実際にどのくらい移動できるかを計算するには、https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidthを調べる必要があります。バーがすべてのコンテンツを表示するために右端まで移動したとき、数値は合計幅と同じではないことを意味します。