CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したスクロールアンカーの無効化

Webブラウザが提供するデフォルトのスクロールアンカーを無効にするには、オーバーフローアンカーを使用できます。 プロパティ。

例

次の例は、オーバーフローアンカープロパティのアイデアを示しています-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   overflow-anchor: none;
}
div{
   display: flex;
   flex-direction: row;
}
</style>
</head>
<body>
<div><img src="https://images.unsplash.com/photo-1613061588991-
6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612129717112-
9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1613079936591-
8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612454902143-
328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用したスクロールアンカーの無効化


  1. オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

    CSS object-fit およびオブジェクトの位置 プロパティは、画像を切り抜いて、要素での表示方法を指定するのに役立ちます。 CSSobject-fitプロパティの構文は次のとおりです- Selector {    object-fit: /*value*/    object-position:/*value*/ } 例 次の例は、CSSobject-fitプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> img {   &nb

  2. CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？

    CSSのpositionプロパティを指定することで、CSSを使用して固定ナビゲーションバーを作成できます。 CSSのpositionプロパティの構文は次のとおりです- Selector {    position: /*value*/; } 以下は、CSS位置プロパティの例です。 例 <!DOCTYPE html> <html> <head> <style> #navigation-bar {    overflow: hidden;    box-shadow: inset 0 0