我的 JavaScript 代码在页面加载时工作了一半，刷新页面使其工作 100% - 如何修复它？

Question

此 JavaScript 代码正在检测 RTL 方向并设置要在元素上启用或删除的禁用属性。当打开页面时，代码检测 RTL 方向，但禁用的属性（添加/删除）在刷新页面之前不起作用。我不知道是什么原因导致它在页面加载时无法工作！

    document.addEventListener("DOMContentLoaded", function () {
  const scrollImages = document.querySelector(".scroll-images");
  const leftButton = document.querySelector(".go_left_h");
  const rightButton = document.querySelector(".go_right_h");

  function isRTL() {
    return document.documentElement.getAttribute("dir") === "rtl";
  }

  function checkScroll() {
    const currentScroll = scrollImages.scrollLeft;
    const scrollLength = scrollImages.scrollWidth - scrollImages.clientWidth;

    if (isRTL()) {
      if (Math.abs(currentScroll) === 0) {
        rightButton.setAttribute("disabled", "true");
        leftButton.removeAttribute("disabled");
      } else if (Math.abs(currentScroll) >= scrollLength) {
        leftButton.setAttribute("disabled", "true");
        rightButton.removeAttribute("disabled");
      } else {
        leftButton.removeAttribute("disabled");
        rightButton.removeAttribute("disabled");
      }
    } else {
      if (currentScroll === 0) {
        leftButton.setAttribute("disabled", "true");
        rightButton.removeAttribute("disabled");
      } else if (currentScroll >= scrollLength) {
        rightButton.setAttribute("disabled", "true");
        leftButton.removeAttribute("disabled");
      } else {
        leftButton.removeAttribute("disabled");
        rightButton.removeAttribute("disabled");
      }
    }
  }

  scrollImages.addEventListener("scroll", checkScroll);
  window.addEventListener("resize", checkScroll);
  checkScroll();

  leftButton.addEventListener("click", leftScroll);
  rightButton.addEventListener("click", rightScroll);
});

// Move the scroll functions outside the DOMContentLoaded listener
function leftScroll() {
  const scrollImages = document.querySelector(".scroll-images");
  scrollImages.scrollBy({
    left: -200,
    behavior: "smooth"
  });
}

function rightScroll() {
  const scrollImages = document.querySelector(".scroll-images");
  scrollImages.scrollBy({
    left: 200,
    behavior: "smooth"
  });
}

可以解决这个问题吗？

Answer 1

你想滚动图像，但你只能滚动包含图像的框架，或者，如果没有，则滚动文档，但我认为目标不是整个文档，因为这样按钮也会消失。

根据你的例子，我会这样解决：

document.addEventListener("DOMContentLoaded", function () {
        const scrollImageContainer = document.querySelector(".scroll-images");
        const leftButton = document.querySelector(".go_left_h");
        const rightButton = document.querySelector(".go_right_h");

        function isRTL() {
            return document.documentElement.getAttribute("dir") === "rtl";
        }

        function checkScroll(scrollImageContainer) {
            const currentScroll = scrollImageContainer.scrollLeft;
            const scrollLength = scrollImageContainer.scrollWidth - scrollImageContainer.clientWidth;

            if (isRTL()) {
                if (Math.abs(currentScroll) === 0) {
                    rightButton.setAttribute("disabled", "true");
                    leftButton.removeAttribute("disabled");
                } else if (Math.abs(currentScroll) >= scrollLength) {
                    leftButton.setAttribute("disabled", "true");
                    rightButton.removeAttribute("disabled");
                } else {
                    leftButton.removeAttribute("disabled");
                    rightButton.removeAttribute("disabled");
                }
            } else {
                if (currentScroll === 0) {
                    leftButton.setAttribute("disabled", "true");
                    rightButton.removeAttribute("disabled");
                } else if (currentScroll >= scrollLength) {
                    rightButton.setAttribute("disabled", "true");
                    leftButton.removeAttribute("disabled");
                } else {
                    leftButton.removeAttribute("disabled");
                    rightButton.removeAttribute("disabled");
                }
            }
        }

        checkScroll(scrollImageContainer);
        scrollImageContainer.addEventListener("scroll", () => {
            checkScroll(scrollImageContainer);
        });

        window.addEventListener("resize", () => {
            checkScroll(scrollImageContainer);
        });

        leftButton.addEventListener("click", () => {
            leftScroll(scrollImageContainer);
        });
        rightButton.addEventListener("click", () => {
            rightScroll(scrollImageContainer);
        });
    });

    // Move the scroll functions outside the DOMContentLoaded listener
    function leftScroll(scrollImageContainer) {
        scrollImageContainer.scrollBy({
            left: -200,
            behavior: "smooth"
        });
    }

    function rightScroll(scrollImageContainer) {
        scrollImageContainer.scrollBy({
            left: 200,
            behavior: "smooth"
        });
    }

.scroll-images {
  overflow: auto;
  width: 400px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div>
    <button class="go_left_h">Left</button>
    <button class="go_right_h">Right</button>
</div>
<div class="scroll-images">
    <img src="https://dummyimage.com/1280x300/ddd/aaa">
</div>