directory : /web/ : sliding-strip.html

Directory path . web .
HTML Document File : sliding-strip.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sliding horizontal strip</title>
</head>
<body>
<style>
div { font-size: 40px; }
</style>
<div style="width:300px; border: 1px solid black;">
part before<br><br>
<div id="scroll_container" style="overflow-y: scroll; white-space: nowrap;">
part: sliding strip 111 222 333 444 555
<style type="text/css">
div::-webkit-scrollbar {
  display: none;
}
</style>
</div>
<br> part after <br>
</div>

<script>
    // not necessary on chrome mobile (works out of the box), but on desktop browser
    // https://htmldom.dev/drag-to-scroll/
    // https://htmldom.dev/assets/demo/drag-to-scroll/index.html
    document.addEventListener('DOMContentLoaded', function () {
        const ele = document.getElementById('scroll_container');
        ele.style.cursor = 'grab';

        let pos = { top: 0, left: 0, x: 0, y: 0 };

        const mouseDownHandler = function (e) {
            ele.style.cursor = 'grabbing';
            ele.style.userSelect = 'none';

            pos = {
                left: ele.scrollLeft,
                top: ele.scrollTop,
                // Get the current mouse position
                x: e.clientX,
                y: e.clientY,
            };

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        };

        const mouseMoveHandler = function (e) {
            // How far the mouse has been moved
            const dx = e.clientX - pos.x;
            const dy = e.clientY - pos.y;

            // Scroll the element
            ele.scrollTop = pos.top - dy;
            ele.scrollLeft = pos.left - dx;
        };

        const mouseUpHandler = function () {
            ele.style.cursor = 'grab';
            ele.style.removeProperty('user-select');

            document.removeEventListener('mousemove', mouseMoveHandler);
            document.removeEventListener('mouseup', mouseUpHandler);
        };

        // Attach the handler
        ele.addEventListener('mousedown', mouseDownHandler);
    });
</script>
<script src="show-source.js"></script>
</body>
</html>