I have a problem with the marquee Effect. Adding a margin when it goes off-screen affects other elements in marquee

Question

I apologize if my question seems silly, but I have been trying hard to solve this problem with an HTML unordered list that includes a marquee element. Using JavaScript, I have set it up to display details when hovering over an <a> tag, but since the marquee is continuously moving, only half of the details appear when part of the text is off-screen. I tried to fix this by using a for loop to detect when the section goes off-screen and add a margin, but it causes issues with the second marquee. Even when it's fully on-screen and I hover over it, it still takes a margin.

I tried deleting the second marquee tried using for loop

const details = document.querySelectorAll('.details');
setInterval(() => {
  details.forEach((detail) => {
    const detailPosition = detail.getBoundingClientRect();

    if (detailPosition.left <= -50) {
      detail.style.marginLeft = "30rem";
    }

  });
}, 1);

<div class="marquee">
  <ul class="marquee__content">
    <li>
      <div class="link-container">
        <a>Oblon Firm and Attorneys Recognized by IP STARS from Managing IP</a>
        <div class="details">
          <h2>FIRM NEWS </h2>
          <p>Founder, Norman Oblon, Named an Intellectual Property Trailblazer by The National Law Journal</p>
          <button>More+</button>
        </div>
      </div>
    </li>
    <li>
      <div class="link-container">
        <a>Oblon and Firm's Attorneys Highly Ranked in 2023 IAM Patent 1000</a>
        <div class="details">
          <h2>ARTICLE </h2>
          <p> Show Me the Money – USPTO Fee Proposals Include Fee Provisions to Impact Applicant Behavior </p>
          <button>More+</button>


        </div>
    </li>
    <li>
      <div class="link-container">
        <a>CAFC Addresses Requirements for Award of Attorneys' Fees</a>
        <div class="details">
          <h2>ARTICLE </h2>
          <p> CAFC Addresses Requirements for Award of Attorneys' Fees </p>
          <button>More+</button>
        </div>


      </div>
    </li>
  </ul>
  <!-- Mirrors the content above -->
  <ul class="marquee__content">
    <li>
      <div class="link-container">
        <a>Oblon Firm and Attorneys Recognized by IP STARS from Managing IP</a>
        <div class="details">
          <h2>FIRM NEWS </h2>
          <p>Founder, Norman Oblon, Named an Intellectual Property Trailblazer by The National Law Journal</p>
          <button>More+</button>
        </div>
      </div>
    </li>
    <li>
      <div class="link-container">
        <a>Oblon and Firm's Attorneys Highly Ranked in 2023 IAM Patent 1000</a>
        <div class="details">
          <h2>ARTICLE </h2>
          <p> Show Me the Money – USPTO Fee Proposals Include Fee Provisions to Impact Applicant Behavior </p>
          <button>More+</button>


        </div>
    </li>
    <li>
      <div class="link-container">
        <a>CAFC Addresses Requirements for Award of Attorneys' Fees</a>
        <div class="details">
          <h2>ARTICLE </h2>
          <p> CAFC Addresses Requirements for Award of Attorneys' Fees </p>
          <button>More+</button>
        </div>


      </div>
    </li>
  </ul>
  </div>

Answer 1

I solved the problem I don't even know how but it worked for me I added a condition that when the element is fully out of screen reset the margin to 0

setInterval(() => {
  details.forEach((detail) => {
    const detailPosition = detail.getBoundingClientRect();

    if (detailPosition.left <= -50) {
      detail.style.marginLeft = `30rem`
    }
    if (detailPosition.left >= 600 ) {
      detail.style.marginLeft = `0px`;
    }
  

  });
}, 1);

600 is the width of the details div