Далее. js сохранение позиции прокрутки при маршрутизации страницы - PullRequest
Новая
       75

Далее. js сохранение позиции прокрутки при маршрутизации страницы

0 голосов
/ 06 января 2020

В настоящее время я создаю веб-сайт на Next. js шаблон.

Мой код маршрутизации такой. (ниже) 

import Link from 'next/link'


<Link href={{ pathname: '/some-url', query: { param: something } }}>
  <div>
    <button type="button" onClick={handleClickMore}><span>+ More</span></button>
  </div>
</Link>

когда я нажимаю эту кнопку <Button>, я не хочу, чтобы положение прокрутки перемещалось. Но, как вы знаете, он перемещается наверх, когда новая страница маршрутизируется. У кого-нибудь есть идеи по поводу сохранения позиции прокрутки при загрузке новой страницы.

Ответы [ 3 ]

1 голос
/ 06 января 2020

Спасибо за ответ LDS Я думаю, что нашел ответ

, когда с помощью Router.pu sh () позиция прокрутки страницы не перемещается.

Код решения - это. 


import Link from 'next/link'

const handleClickMore = () => {
  Router.push({
    pathname: '/story/category/movie/movielist',
    query: { category: props.category, page: (parseInt(props.page) + 1) }
  })
}


<Link href={{ pathname: '/some-url', query: { param: something } }}>
  <div>
    <button type="button" onClick={handleClickMore}><span>+ More</span></button>
  </div>
</Link>

К вашему сведению Я пропустил код объявления компонента.

1 голос
/ 04 февраля 2020 
<Link scroll={false} href="/"><a>Home</a></Link>

scroll={false} отключит прокрутку вверх при изменении страницы для этой указанной c ссылки.

Ссылка: https://github.com/zeit/next.js/issues/3950

0 голосов
/ 06 января 2020 

You may disable the scrolling There are two examples bellow

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}
JS

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}



Another way 



.stop-scrolling {
  height: 100%;
  overflow: hidden;
}


$('body').addClass('stop-scrolling')
...