Как остановить Sapper от прокрутки вверх во вложенных маршрутах?

Дело в том, что у меня два маршрута /istifta и /istifta/edit

Маршрут /istifta отображает istiftas (вопросы), а маршрут /istifta/edit открывает панель для редактирования вопросов на той же странице из-за того же файла _layout.svelte.

Единственная проблема в том, что когда я обращаюсь к /istifta/edit из /istifta. Он не только открывает панель редактирования, но и прокручивает страницу вверх. Как я могу остановить это поведение? Я хочу оставаться в той же позиции прокрутки при этой навигации. Истифты — длинный список. Для редактирования он должен оставаться на той же позиции прокрутки. Снова и снова прокручивать вниз и находить идентификаторы слишком сложно для пользователя.

Пожалуйста, решите это. Особенно Рич Харрис, если вы это читаете.


scroll svelte sapper
person Yousuf Iqbal Hashim    schedule 26.09.2019    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Мы действительно должны задокументировать это, но если вы добавите атрибут sapper-noscroll к тегу <a>, это предотвратит такое поведение:

<!-- in src/routes/istifta/index.svelte -->
<a href="istifta/edit" sapper-noscroll>edit</a>
person Rich Harris    schedule 26.09.2019
comment
Чрезвычайно полезно. - person Yousuf Iqbal Hashim; 26.09.2019
comment
Привет, sapper-noscroll у меня не работает.. Ниже я описал свое использование.. Я что-то упустил? - person Deepan; 04.10.2019

arrow_upward
0
arrow_downward

"сапер": "^0.27.9"

sapper-noscroll у меня не работает

блоги blogs/index.svelte

<a sapper-noscroll href="blogs/1">Go to Blog 1</a>
<a sapper-noscroll href="blogs/2">Go to Blog 2</a>
<a sapper-noscroll href="blogs/3">Go to Blog 3</a>
<a sapper-noscroll href="blogs/4">Go to Blog 4</a>
...
...
<a sapper-noscroll href="blogs/100">Go to Blog 100</a>

блоги/[slug].svelte

<a href="blogs">Go Back to Blogs </a>
<h1> Blog details<h1>

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

person Deepan    schedule 04.10.2019

arrow_upward
0
arrow_downward

сейчас 2020 год, и похоже, что с момента ответа Рича все изменилось на один символ.

sapper-noscroll мне не помогло, а sapper:noscroll помогло.

документы Sapper по этому вопросу

person Félix Paradis    schedule 14.11.2020