デモ「マウスでスクロールアンカリングをコントロールしたい」のコード

 【マウスでスクロールアンカリングをコントロールしたい】に載せたデモのコード。

<div style="border:1px solid gray; padding:5px;">
<button onclick="startAutoAdd()">ボックス追加スタート</button>
<button onclick="stopAutoAdd()">ストップ</button>
<button onclick="startAutoRemove()">ボックス削除スタート</button>
<div id="container20251229" style="overflow-anchor:auto;">
<pre class="child-box" style="height:auto;background-color:yellow;">
このボックス：class="child-box"
上に追加される追加ボックス：class="child-box"
マウスでアンカーをコントロールするためのＣＳＳ
.child-box { overflow-anchor: none !important; }
.child-box:hover,
.child-box:active,
.child-box:focus-within {
    overflow-anchor: auto !important;
}
</pre>
<p style="margin-top:300px;background-color:yellow;">常に、overflow-anchor:auto;</p>
</div>
<button onclick="toggleScrollAnchor()">overflow-anchor:切替</button>
<div id="status20251229">overflow-anchor: auto;</div>
<style id="dynamic-style-tag"></style>
<script>
// 1. 追加したいCSSの内容を定義
const customCSS = `
    .child-box { overflow-anchor: none !important; }
    .child-box:hover,
    .child-box:active,
    .child-box:focus-within {
        overflow-anchor: auto !important;
    }
`;
let isCssActive = false;
const styleTag = document.getElementById('dynamic-style-tag');
const statusText = document.getElementById('status20251229');

// 2. CSSの追加・削除を切り替える関数
function toggleScrollAnchor() {
    if (!isCssActive) {
        styleTag.textContent = customCSS;
        statusText.textContent = "overflow-anchor: none;";
        statusText.className = "active";
    } else {
        styleTag.textContent = "";
        statusText.textContent = "overflow-anchor: auto;";
        statusText.className = "";
    }
    isCssActive = !isCssActive;
}
</script>
<style>
button{border:3px solid gray; padding:5px;}
/* 親ボックスの設定 */
#container20251229 {
    width: 100%;
    height: 300px;
    border: 2px solid #333;
    overflow-y: auto; /* 中身が増えたらスクロール可能に */
    display: flex;
    flex-direction: column;
}
/* 追加される子ボックスの共通スタイル */
.child-box {
    width: 100%;
    height: 50px;
    flex-shrink: 0; /* 高さが圧縮されないように固定 */
</style>
<script>
function addBox() {
    const container = document.getElementById('container20251229');

    // 1. 新しいボックスを作成
    const newBox = document.createElement('div');
    newBox.className = 'child-box';

    // 2. 背景色をランダムに生成
    const randomColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
    newBox.style.backgroundColor = randomColor;

    // 3. 親要素の一番上に追加
    // prependは最初の子要素として挿入するメソッドです
    container.prepend(newBox);
}
function removeFirstBox() {
    const container = document.getElementById('container20251229');
    // クラス名が child-box である要素のうち、一番最初のものを探す
    const firstBox = container.querySelector('.child-box');

    if (firstBox) {
        firstBox.remove();
    }
}
let timerId = null; // タイマーの状態を管理する変数
// 自動追加を開始する関数
function startAutoAdd() {
    stopAutoAdd();
    if (timerId === null) { // 二重起動を防ぐ論理チェック
        timerId = setInterval(addBox, 1000);
    }
}
// 自動削除を開始する関数
function startAutoRemove() {
    stopAutoAdd();
    if (timerId === null) { // 二重起動を防ぐ論理チェック
        timerId = setInterval(removeFirstBox, 1000);
    }
}

// 自動追加を停止する関数
function stopAutoAdd() {
    if (timerId !== null) {
        clearInterval(timerId); // タイマーを解除
        timerId = null; // 状態をリセット
    }
}
</script>
</div>