Блог

Я имею дело с проблемой с горизонтальным меню в моем приложении React JS.

Я использую react-scroll для плавной прокрутки и прокрутки, поэтому ссылки на меню подсвечиваются при обнаружении раздела.

Все работает нормально, но мне нужно переместить меню в направлении Y при попадании в раздел, где ссылка на меню находится вне области просмотра.

Я загрузил демонстрацию на https://clever-borg-a6bcdb.netlify.app /. Проблема особенно заметна в мобильной версии Интернета.

Есть ли какой-нибудь простой способ, как переместить меню, чтобы пункт меню текущего раздела всегда находился в начале окна просмотра (с левой стороны)?

Спасибо.

Код ниже:

 function SubmenuCategory() {
    return (
                    <section className="submenu">
                        <div className="container flex" id="submenuContainer">
                            <nav>
                                <ul>
                                    <li className="item"><Link activeClass="active" to="category1" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category1</Link></li>
                                    <li className="item"><Link to="category2" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category2</Link></li>
                                    <li className="item"><Link to="category3" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category3</Link></li>
                                    <li className="item"><Link to="category4" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category4</Link></li>
                                    <li className="item"><Link to="category5" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category5</Link></li>
                                    <li className="item"><Link to="category6" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category6</Link></li>
                                    <li className="item"><Link to="category7" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category7</Link></li>
                                    <li className="item"><Link to="category8" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category8</Link></li>
                                </ul>
                            </nav>
                        </div>
                    </section>

    )
}

function CategoryContainer() {
    return (
        <>
        <div id="category1" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 1</h1> 
        </div>
        <div id="category2" style={{"height": "200px", "backgroundColor": "orange"}}> 
            <h1>Category 2</h1> 
        </div>
        <div id="category3" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 3</h1> 
        </div>
        <div id="category4" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 4</h1> 
        </div>
        <div id="category5" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 5</h1> 
        </div>
        <div id="category6" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 6</h1> 
        </div>
        <div id="category7" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 7</h1> 
        </div>
        <div id="category8" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 8</h1> 
        </div>
        </>
        
    )
}
 

Итак, решение этой проблемы — использовать опцию onSetActive для вашего элемента Link. В этом параметре вы должны вызвать функцию, которая позволяет просматривать прокрутку:

  function handleScroll(id){
          document.getElementById(id).scrollIntoView({inline: "center"});
      }
 

Чтобы быть функциональным, в элементе li должен быть атрибут id, который является родительским для компонента Link.