Tutorials

Dynamically set URL and title

Updating the browser URL as the visitor scrolls through articles in an infinite scroll manner is highly implementation dependent. The solution used here may not work for your site, but it gives an idea of how it can be done.

In our example, we have two editorial articles with a native article in between. The attributes data-pathname and data-title on the article elements hold the URL and title we want to set when the article is in view. The native scroll article gets its attributes once it is loaded, which is when the information about the article is available.

Articles

<div data-pathname="/editorial-article-1" data-title="Editorial article 1">
    Editorial article 1
</div>
<div data-adk-container="native-scroll"></div>
<div data-pathname="/editorial-article-2" data-title="Editorial article 2">
    Editorial article 2
</div>

As the visitor scrolls through the articles, we update the URL and document title to match the current article using an IntersectionObserver. This code runs on the page.

Observer logic

let currentArticle = null
const observer = new IntersectionObserver((entries) => {
    entries.forEach(({ target, isIntersecting }) => {
        if (isIntersecting) {
            if (currentArticle !== target) {
                currentArticle = target
                const { pathname, title } = currentArticle.dataset
                document.title = title
                window.history.replaceState({}, title, pathname)
            }
        }
    })
}, {
    threshold: 0.5
})

// Add the editorial articles to the observer
document.querySelectorAll('[data-pathname]').forEach((article) => observer.observe(article))

Setup

adk.config()
    .addContainer('native-scroll', adk.container.config()
        .params({
            adapters: {
                'com.advisible.native.article': {
                    afterLoad: ({ err, item, elem }) => {
                        if (!err && item) {
                            // Set the attributes and add the element to the observer
                            elem.dataset.pathname = new URL(item.url).pathname
                            elem.dataset.title = item.headline
                            observer.observe(elem)
                        }
                    },
                },
            },
        }))

Result

Editorial article 1

Editorial article 2