オーバーフロー：スクロール;ページの端に枠線を追加するCSS？

Question

私は、以下のCSSでdiv要素を持っている：

overflow: scroll;

しかし、それはブラウザによって追加された境界線がありますことが表示されます、それは見えていた場合、スクロールバーが表示されますここで、（それがある場合にも（？）表示されません）。私は開発ツール内でCSSを検査しており、このスタイリングのリファレンスを見つけることができません。このスクロールバーのスタイルを非表示にするにはどうすればよいですか？

ここでは、スクリーンショットの例を示します。赤い矢印は画面の右端を指していますが、その境界線のスタイリングを追加しませんでした。 overflow: scroll;スタイルルールを削除すると消えます。

注、私はChromeとSafariの（両方の最新バージョン）の両方で、この動作を見ています。

Answer 1

オーバーフロープロパティを 'scroll'に設定すると、コンテンツがサイズにクリップされます。これにより、コンテンツがコンテナの境界を水平方向および垂直方向に超えないようにします。また、スクロールバーは、スクロールバーが必要かどうかにかかわらず、水平および垂直に配置されます。

これは、両方のスクロールバーが表示されます。

<div id="div1"> 
    Content 
</div> 

#div1 { 
    overflow:scroll; 
} 

「自動」の値は、垂直、水平またはその両方必要に応じてスクロールバーが表示されます。

変更するにはCSS：あなたは、水平または垂直方向のみのためのoverflowプロパティを設定することができ

#div1 { 
    overflow:auto; 
} 

。垂直スクロールバーが存在しないことを保証したい場合は、これをautoより上で使用できます。

変更にCSS：

#div1 { 
    overflow-x:scroll; /* Set the overflow horizontal property to clip the content 
and display a horizontal scroll bar. */ 
} 
    overflow-y:hidden; /* Set the overflow vertical property to clip the content, 
hide the vertical scroll bar and any content outside of the top/bottom borders. */ 
}