スクロールアンカリングを無効にするコードが機能するかどうかのテストコード
スクロールアンカリングを無効にするコードが機能するかどうかのテストコード
スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
あるノードがアンカーとして適切でないと思われる場合は、以下のように
overflow-anchorを使用してそのノードを除外することができます。無効にする必要がある場合は
仕様書では、新しいプロパティである
overflow-anchorを追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。指定できる値は、
autoまたはnoneのどちらかです。
autoが初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。noneは、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。文書全体でスクロールアンカリングを無効にするには、
<body>要素にこのプロパティを指定してください。
メモ: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。 CSS Scroll Anchoring Module Level 1
https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api
Note: It is not possible to turn scroll anchoring "back on" for descendants of a overflow-anchor: none element. However, descendant scroll containers automatically "turn it back on" (for their own scrolling box) unless they explicitly have overflow-anchor: none set on them as well.
テストページ。
まずは、style="overflow-anchor: none;" がないコード。
test20231031-2-0.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>overflow-anchorテスト（noneなし）</title>
<style>
#divbox{width:300px; height:100px; overflow-y:scroll;}
</style>
</head>
<body>
<div id="divbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<script>
// div要素を取得
var div = document.getElementById("divbox");
// 10秒後に実行する関数を設定
setTimeout(function() {
// 新しいdiv要素を作成
var newDiv = document.createElement("div");
// 追加したいHTML
var newHTML = "11<br>12<br>13<br>14<br>15";
// HTMLを新しいdivに設定
newDiv.innerHTML = newHTML;
// 新しいdivを既存のdivの先頭に追加
div.insertBefore(newDiv, div.firstChild);
}, 10000); // 10000ミリ秒 = 10秒
</script>
</body>
</html>
次に、id="divbox" のdivタグに style="overflow-anchor: none;"を追加したコード。
test20231031-2-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>overflow-anchorテスト（スクロールボックスdivにnone追加）</title>
<style>
#divbox{width:300px; height:100px; overflow-y:scroll;}
</style>
</head>
<body>
<div id="divbox" style="overflow-anchor: none;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<script>
// div要素を取得
var div = document.getElementById("divbox");
// 10秒後に実行する関数を設定
setTimeout(function() {
// 新しいdiv要素を作成
var newDiv = document.createElement("div");
// 追加したいHTML
var newHTML = "11<br>12<br>13<br>14<br>15";
// HTMLを新しいdivに設定
newDiv.innerHTML = newHTML;
// 新しいdivを既存のdivの先頭に追加
div.insertBefore(newDiv, div.firstChild);
}, 10000); // 10000ミリ秒 = 10秒
</script>
</body>
</html>
test20231031-2-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>overflow-anchorテスト（bodyにnone追加）</title>
<style>
#divbox{width:300px; height:100px; overflow-y:scroll;}
</style>
</head>
<body style="overflow-anchor: none;">
<div id="divbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<script>
// div要素を取得
var div = document.getElementById("divbox");
// 10秒後に実行する関数を設定
setTimeout(function() {
// 新しいdiv要素を作成
var newDiv = document.createElement("div");
// 追加したいHTML
var newHTML = "11<br>12<br>13<br>14<br>15";
// HTMLを新しいdivに設定
newDiv.innerHTML = newHTML;
// 新しいdivを既存のdivの先頭に追加
div.insertBefore(newDiv, div.firstChild);
}, 10000); // 10000ミリ秒 = 10秒
</script>
</body>
</html>
スクロールアンカリングが無効になったのは、test20231031-2-1.html だけ。bodyタグに style="overflow-anchor: none;"を追加しても、スクロールアンカリングは無効にならない。
追記（2023/11/2）：
bodyタグに style="overflow-anchor: none;"を追加すれば、bodyには効くことを確認するためのコード。
test20231031-2-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>overflow-anchorテスト（bodyにnone追加）</title>
<style>
#divbox{width:300px; height:100px; overflow-y:scroll;}
</style>
</head>
<body style="overflow-anchor: none;">
<div id="divbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<div style="margin-top:800px;">
bodyをスクロールさせる
</div>
<script>
// div要素を取得
var div = document.getElementById("divbox");
// 10秒後に実行する関数を設定
setTimeout(function() {
// 新しいdiv要素を作成
var newDiv = document.createElement("div");
// 追加したいHTML
var newHTML = "11<br>12<br>13<br>14<br>15";
// HTMLを新しいdivに設定
newDiv.innerHTML = newHTML;
// 新しいdivを既存のdivの先頭に追加
div.insertBefore(newDiv, div.firstChild);
// 新しいdivを既存のdivの上に追加
var parentDiv = div.parentNode;
var newDivCopy = newDiv.cloneNode(true);
parentDiv.insertBefore(newDivCopy, div);
}, 10000); // 10000ミリ秒 = 10秒
</script>
</body>
</html>
コメント
コメントを投稿