Как сохранить положение прокрутки при возврате на страницу с помощью ленивой загрузки?

На самом деле, вопрос очень ясен, как видно из заголовка. Часть, которую я хочу добавить, заключается в следующем, как и в Twitter, когда я спускаюсь вниз по странице, а затем ввожу данные профиля пользователя или поста и возвращаюсь на предыдущую страницу, нажав кнопку назад в браузере, страница открывается там, где я остановился, несмотря на лень. Как я могу добиться этого с помощью Django. Не знаю, имеет ли это значение, но в качестве cdn в моем проекте используется Vue

Я хотел бы рассказать о примере на эту тему. В браузерах Safari и Chrome на компьютере с macOS при нажатии кнопки назад в браузере происходит именно то событие, которое я хочу. Он возвращается, как будто предыдущая страница была закэширована, но на компьютерах с Windows или Linux при нажатии кнопки назад в браузере он переходит на предыдущую страницу, запрашивая ее снова.

Если вы используете представления для рендеринга всей страницы, я не вижу прямого способа, который заставит браузер прокручивать страницу на кнопку "Назад".

В случае шаблонов HTML/CSS/JavaScript у вас есть два варианта: либо полностью положиться на браузер, который будет управлять прокруткой за вас (это будет работать, когда браузер кэширует страницу).

Или вы можете добавить простой скрипт, который хранит предыдущий и текущий маршруты в локальном хранилище и проверяет прокрутку при загрузке страницы :

const json = localStorage.getItem("routes");
const currentPath = window.location.pathname;
let newPrevious = null;

if(json) {
    const routes = JSON.parse(json);
    const isPrevious = routes.previous != null
             && routes.previous.path === currentPath;

   if(isPrevious){
       const { x, y } = routes.previous;
       window.scrollTo(x,y);
   } 

   //Our new previous route is the old current
   newPrevious = routes.current;
}
//Now we update the current route.
const newRoutes = {
    current: { x: 0, y: 0, path: currentPath },
    previous: newPrevious
}
localStorage.setItem("routes", JSON.stringify(newRoutes));

Включите предыдущий скрипт при загрузке каждой страницы. Теперь мы добавляем слушателя перед выгрузкой, где мы добавляем последнюю позицию прокрутки.

const x = pageXOffset ?? document.documentElement.scrollLeft 
      ?? document.body.scrollLeft ?? 0;
const y = pageYOffset ?? document.documentElement.scrollTop 
      ?? document.body.scrollTop ?? 0;
let routes = JSON.parse(localStorage.getItem("routes"));

routes = { ...routes, current: { ...routes.current, x, y } };
localStorage.setItem("routes", JSON.stringify(routes));

Просто имейте в виду, что это заставит прокручивать страницу, даже если на ней есть ссылка, которая перенаправляет на предыдущую.

Добавление: В случае, если вы думаете использовать фронтенд-библиотеку, такую как Vue, с Vue router, вы можете забыть об управлении этим вручную и просто использовать <router-link> для перенаправления на вашем сайте, и прокрутка будет управляться автоматически. Вы можете проверить эту возможность здесь в документации . Я думаю, это относится к twitter, вы можете увидеть здесь они используют React native for web.

Вернуться на верх