div-containerの内側の幅を変更するのを防ぐ

Question

y-スクロールバーがdiv-containerの内側の幅を変更しないようにする方法はありますか？スクロールバーが表示されるまで、divコンテナの子は常に右パディングを持つことができますか？

例では、テキストが垂直スクロールバーの有無に応じて異なる幅を有する。 js fiddle

HTML

<div> 
    <span> 
    Lorem ipsum dol... 
    </span> 
</div> 

CSS

div { 
    border: solid 1px; 
    width: 200px; 
    height: 150px; 
    overflow: auto; 
    margin: 10px; 
} 

span { 
    display: block; 
    background: rgba(122, 150, 255, 0.23); 
} 

Answer 1

は、要素の名前で要素を交換この機能を有効にします。
オーバーレイは要素に追加するのではなく、要素の上にスクロールバーを追加します。

element { 
    overflow-y :overlay; 
    } 

Jsfiddle

私はJsfiddleを更新しました。両方の要素が同じです。
スクロールバーはまだ上に表示されますが。幅はで始めることができます。最初の幅+スクロールバーの幅 JavaScriptを使用していますが、スクロールバーの幅はブラウザによって異なりますので、互換性の問題が発生するので試してください。