my javascript code working half it’s job on page load , refresh the page make it works 100% – how to fix it?

this javascript code is detecting RTL direction and set disabled Attribute to be enabled or removed on elements . wen open page the code detect the RTL direction but the disabled Attribute (add/remove) not works until refresh the page . i dont know what cause it to not work on page load !

    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"
  });
}

can fix this issue ?