Бесконечный скролл постов с подменой URL, title, description

Как при прокрутке поста, подгрузить следующий (бесконечная лента), при этом, чтобы в обе стороны при скролле менялись title, URL?

Есть ли инструкции или готовые пакеты для реализации? Используется PHP, Laravel.

Для демонстрации работы того что нужно, можно взять сайт: https://iz.ru/1101264/2020-12-17/cas-zapretil-rossiiskii-sportsmenam-vystupat-pod-flagom-strany


Ответы (2 шт):

Автор решения: Eric7777777

Вас минусят за то, что в вашем вопросе нет примеров кода, что сильно противоречит первопричине создания данного сайта, для остальных пользователей это выглядит как "Напишите за меня код, я не хочу думать и терять время и поисковиков для меня не существует".

Из того что поможет решить вашу задачу:

https://snipp.ru/php/loading-scrolling

https://webformyself.com/beskonechnyj-skroll-s-avtomaticheskoj-zagruzkoj-kontenta/

Из приведенных примеров вы можете взять код и адаптировать под свою задачу, попутно добавив необходимое и если у вас не получится, можете повторно разместить задание с кодом и вам помогут его доработать.

→ Ссылка
Автор решения: MixJay

Решил свою же проблему таким образом.

Выбираем все нужные статьи. Первой идёт нужная нам по запросу.

public function index($id)
{
    $articles = Article::query()
        ->orderByRaw("FIELD(id, $id) DESC") // первой идёт статья по запросу
        ->paginate(1);

    return view('article')->with('articles', $articles);
}

Формируем шаблон со статьёй. Сам бесконечный скролл работает на Jquery Jscroll. Делается очень легко! Подключается сам скрипт и простейшая конфигурация.

Шаблон статьи выглядит примерно так:

@foreach($articles as $article)
<div class="jscroll">

    {{-- данные для подмены url, title и т.д. --}}
    <div data-marker class="g-hidden"
         data-id="{{ $article->id }}"
         data-title="{{ $article->title }}"
         data-description="{{ $article->description }}"
         data-url="{{ route('article', $article->id) }}">
    </div>

    {{-- заг, подзаг, фотки, текст... --}}

</div>

{{-- пагинация --}}
<div class="d-none">
    {{ $articles->links('pagination-infinite') }}
</div>

</div>
@endforeach

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

.g-hidden {
    position: absolute;
    margin-left: -9999px;
}

Шаблон для пагинации выглядит стандартно и максимально урезанно (только кнопка "далее").

@if ($paginator->hasPages())
    <nav class="pagination justify-content-center b-pagination">
        <ul class="pagination">
            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">
                        Вперед
                    </a>
                </li>
            @endif
        </ul>
    </nav>
@endif

Подключение Jscroll:

$('.jscroll').jscroll({
    padding: 400,
    nextSelector: '.page-link[rel="next"]',
    contentSelector: 'div.jscroll',
});

Сам основной скрипт:

// переборка маркеров <div data-marker> для определения позиции где мы находимся и подмены нужных данных
function checkMarkers() {
    const markers = $('.b-wrap__content [data-marker]').get().reverse(); // в обратном порядке для перебора
    if (markers.length < 1) {
        return; // данные для подмены не найдены
    }

    // перебираем маркеры и проверяем расстояние до шапки сайта +300 px
    for (let element of markers) {
        let toTop = element.getBoundingClientRect().top;

        // метка близка к шапке, меняем параметры страницы
        if (toTop < 300) {
            changePageAttributes(element.dataset);
            break;
        }
    }
}

function changePageAttributes(data) {
    // сверяем url маркера с текущим url страницы
    const url = $(location).attr("href"); 
    if (url === data.url) {
        return true; // находимся на той же статье, менять параметры не требуется
    }

    window.history.replaceState(data.url, data.title, data.url); // подменяем url
    document.title = data.title; // подменяем title
    $("meta[name='description']").attr('content', data.description); // подменяем description
}

Основная задача выполнена! С JS на Вы, поэтому делал как мог!

→ Ссылка