Выделите c якорь с нагрузкой - PullRequest
Новая
       7

Выделите c якорь с нагрузкой

0 голосов
/ 12 февраля 2020

У меня есть разделы с якорями (например: #sources), и я пытаюсь заставить страницу прокручивать эти разделы каждый раз, когда загружается URL страницы с привязкой. Однако этот код не работает эффективно и он очень нестабилен. Здесь я что-то не так делаю?

Вы можете увидеть сайт в действии здесь: http://f-f-b.surge.sh. Чтобы увидеть ошибку, просто посетите веб-сайт с этим якорем: http://f-f-b.surge.sh/#the -press-of-new-york-its-future . Ожидаемое поведение: страница должна постоянно прокручиваться до раздела, в котором написано THE PRESS OF NEW YORK-ITS FUTURE.

Вот код:

В импорте: 

var scrollToElement = require('scroll-to-element');

В состоянии: 

  this.state = {
  mockDataTweets: _.reverse(mock_data_tweets),
  tweetSamples: null,
  spreadsheetData: null,
  typistIndex: 0,
  about: null,
  whos: null,
  news: null,
  acknowledgments: null,
  windowScroll: 0,
  scrolled: 0,
};

В компонентеDidMount (): 

componentDidMount(){

  let spreadsheetAPI = config.preFix + config.sheetID + config.postFix;
    axios.get(spreadsheetAPI)
      .then((response) => {
        this.setState({
          spreadsheetData: response.data.feed.entry
        })
      }).catch((err) => {
      console.log(err);
    })

    if(this.state.spreadsheetData === null){
      console.log("unloaded");
    }else{
      console.log("loaded");
      return this.slideLocationPathname()
    }
  }
}

За пределами моего componentDidMount (): 

  slideLocationPathname = () => {
    let locationPathname = window.location.pathname;
    if(locationPathname !== "/"){
      let pathnameToScroll = "#" + locationPathname.split("/")[1];
      scrollToElement(pathnameToScroll);
    }  
  }
...