【CSS】スクロールバーによるガタつきを解消するscrollbar-gutterプロパティ

  <div class="l-container">


    <p>scrollbar-gutter なし</p>
    <div class="p-box">
      <p>テキストテキスト</p>
      <p>テキストテキスト</p>
      <p>テキストテキストテキストテキスト</p>
    </div>
    <button class="c-button">ボタン</button>

    <hr style="border:2px solid red;">

    <p>scrollbar-gutter あり</p>
    <div class="p-box p-box--gutter">
      <p>テキストテキスト</p>
      <p>テキストテキスト</p>
      <p>テキストテキストテキストテキスト</p>
    </div>
    <button class="c-button">ボタン</button>

  </div>

.l-container {
  padding: 50px;
}

.p-box {
  width: fit-content;
  height: 150px;
  border: 1px solid #000;
  overflow: auto;
  padding: 10px;
  background-color: #f7f7f7;

}

.c-button {
  background-color: orange;
  padding: 10px;
  margin-top: 10px;
}


.p-box.p-box--gutter {
  scrollbar-gutter: stable;
}

document.addEventListener("DOMContentLoaded", function () {
  const buttons = document.querySelectorAll(".c-button");

  buttons.forEach(function(button) {
    button.addEventListener("click", function () {
      const box = button.previousElementSibling;
      if (box && box.classList.contains("p-box")) {
        const newParagraph = document.createElement("p");
        newParagraph.textContent = "新しいテキスト";
        box.appendChild(newParagraph);
      }
    });
  });
});