Блог

У меня есть две строки текста в середине моей страницы, которые я хочу, чтобы они прокручивались горизонтально снаружи страницы, чтобы войти, а затем выйти с другой стороны. Верхняя строка идет слева и проходит через правую, а вторая строка делает противоположное. Моя проблема в том, что scrollY не остается постоянным при изменении размера экрана.

Есть ли хорошее решение для прокрутки текста только тогда, когда вы попадаете в этот конкретный раздел страницы? Прямо сейчас раздел отображается на 2200 пикселей при полном просмотре, и я использую это число для запуска прокрутки

У меня есть этот крючок, который прослушивает свиток:

 export default function useScrollListener() {  const [data, setData] = useState({  x: 0,  y: 0,  lastX: 0,  lastY: 0  });   // set up event listeners  useEffect(() =gt; {  const handleScroll = () =gt; {  setData((last) =gt; {  return {  x: window.scrollX,  y: window.scrollY,  lastX: last.x,  lastY: last.y  };  });  };   handleScroll();  window.addEventListener("scroll", handleScroll);   return () =gt; {  window.removeEventListener("scroll", handleScroll);  };  }, []);   return data; }  

На странице, на которой есть две строки, у меня есть :

 const scroll = useScrollListener(); const [position, setPosition] = useState('')  useEffect(() =gt; {  let pos = scroll.y  let scrollPos = pos - 3000    // Section with the lines of text starts around 2200 on scrollY  if(scroll.y gt; 2200){  setPosition(scrollPos.toString())  } }, [scroll.y]);  

Текст обернут вокруг div, который является относительным, и текст имеет абсолютную позицию, сдвигающую элемент вправо или влево на 800 пикселей.

 lt;div className="line1"gt;  lt;p className="text1" style={{"left": `${position}px`}}gt;  Lorem ipsum dolor sit amet.  lt;/pgt; lt;/divgt;   lt;div className="line2"gt;  lt;p className="text1" style={{"right": `${position}px`}}gt;  Lorem ipsum dolor sit amet.  lt;/pgt; lt;/divgt;