python-tdd/src/templates/apps/billboard/_partials/_applet-billboard-scroll.html

<section id="id_applet_billboard_scroll" class="applet-billboard-scroll">
    <h2>{{ room.name }}</h2>
    {% include "core/_partials/_scroll.html" %}
</section>
<script>
(function() {
    var scroll = document.getElementById('id_drama_scroll');
    if (!scroll) return;

    // Restore saved position
    scroll.scrollTop = {{ scroll_position }};

    // Debounced save on scroll
    var saveTimer;
    scroll.addEventListener('scroll', function() {
        clearTimeout(saveTimer);
        saveTimer = setTimeout(function() {
            var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
            var token = csrfToken ? csrfToken.value : '';
            fetch("{% url 'billboard:save_scroll_position' room.id %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': token,
                },
                body: 'position=' + Math.round(scroll.scrollTop),
            });
        }, 800);
    });
})();
</script>