scrollIntoView вся страница смещается вниз

Я хочу построить индексированные письма. Когда я нажимаю на букву (например, A, B, C). Он должен прокручиваться до заголовка. Я использовал scrollIntoView здесь. Все в порядке, кроме "block: start". Когда я хочу прокрутить до заголовка начала, прокрутка всей страницы с помощью контейнера.

Вот моя гифка о проблеме

введите здесь описание изображения

Вот мой код html, css и javascript.

const scrollTo = id => {
let ref = document.getElementById(id)
if (ref /* + other conditions */) {
  ref.scrollIntoView({
    behavior: "smooth",
    block: "start",
    inline: "start",
  })
}

}

<div className="glossary">
    <div className="glossary-items grid">
      <div className="d-flex ">
        <div className="glossary-letters ">
          <ul>
            {letter.map(item => (
              <li onClick={() => scrollTo(item)}>
                <a> {item}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="glossary-titles">
          <ul>
            {glossary.map((item, index) => (
              <div key={item.group}>
                <li id={item.group}>{item.group}</li>
                {item.children.map((item2, i) => (
                  <li key={i}>
                    <Link
                      activeClassName="glossary-titles-active"
                      to={`/en/sozluk/${item2.first_name + item2.id}`}
                    >
                      {item2.first_name}
                    </Link>
                  </li>
                ))}
              </div>
            ))}
          </ul>
        </div>
      </div>
      <div className="glossary-content ml-5">
        <Router>
          <Glossary path="en/sozluk/:id" />
        </Router>
      </div>
    </div>
  </div>

reactjs javascript scrollview css js-scrollintoview
person Mert    schedule 03.06.2020    source источник
comment
Я только что понял, что есть логический параметр, который вы можете передать, и установка для него значения false помогла мне: myRef.current.scrollIntoView(false)   -  person KIC    schedule 11.05.2021

Ответы (1)


arrow_upward
2
arrow_downward

С этим связан вопрос

Вы можете использовать функцию scrollTo родительского элемента для прокрутки до определенного дочернего элемента.

Пример

const { useState, useEffect, useRef } = React;
const App = () => {
  const [list, setList] = useState([]);
  const [keywords, setKeywords] = useState([]);
  const refs = useRef(null);
  const parentRef = useRef(null);
  
  useEffect(() => {
    const newList = Array(25).fill(0).map((pr, index) => String.fromCharCode(65 + index));
    const newKeywords = newList.flatMap(pr => [pr, ...newList.map(npr => pr + npr)]);
    
    refs.current = newList.reduce((acc, letter) => {
      acc[letter] = React.createRef();
      return acc;
    }, {});
    
    setList(newList);
    setKeywords(newKeywords);
  }, [])
  
  const onClick = ({target: {dataset: {letter}}}) => {
    const element = refs.current[letter].current;
    const parent = parentRef.current;
    
    const onScroll = () => {
      const relativeTop = window.scrollY > parent.offsetTop ? window.scrollY : parent.offsetTop
    
      parent.scrollTo({
        behavior: "smooth",
        top: element.offsetTop - relativeTop
      });
    }
    
    window.removeEventListener("scroll", onScroll);
    window.addEventListener("scroll", onScroll);
    
    onScroll();
    
    /*
    element.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "start",
    })
    */
  }
  
  const tryAssignRef = (letter) => {
    return list.indexOf(letter) > -1 ? {ref: refs.current[letter]} : {};
  }

/// ...{ref: {refs.current['A']}}
  return <div className="container">
    <div className="header">
    </div>
    <div className="body">
      <div className="left">
        <div className="letters">{list.map(pr => <div className="letter" onClick={onClick} data-letter={pr} key={pr}>{pr}</div>)}</div>
        <div ref={parentRef} className="keywords">{keywords.map(pr => <div {...tryAssignRef(pr)} key={pr}>{pr}</div>)}</div>
      </div>
      <div className="right">
      </div>
    </div>
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
.container, .body, .left {
  display: flex;
}

.container {
  flex-direction: column;
}

.header {
  flex: 0 0 100px;
  border: 1px solid black;
}

.body {
  height: 1000px;
}

.left {
  flex: 1;
}

.right {
  flex: 2;
}

.left { 
  justify-content: space-between;
}

.letter {
  padding: 2px 0;
  cursor: pointer;
}

.letters, .keywords {
  padding: 0 10px;
}

.keywords {
  overflow-y: scroll;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

person Józef Podlecki    schedule 03.06.2020
comment
Спасибо за ответ. Я тоже нашел простое решение. Вы можете указать идентификатор относительного div (глоссарий-контейнер) и использовать функцию scrollTop. var topPos = ref.offsetTop document.getElementById("glossary-container").scrollTop = topPos - 143 - person Mert; 03.06.2020
comment
Я избегаю использования document.getElement* в React. Лучше использовать реф. - person Józef Podlecki; 03.06.2020
comment
Спасибо за похвалу. Почему я должен использовать ref вместо document.getElement*? - person Mert; 03.06.2020
comment
Это реактивный мир. вы не знаете, когда элемент появится или нет - person Józef Podlecki; 03.06.2020