Показать сообщение отдельно
  #6 (permalink)  
Старый 14.07.2021, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

просмотр перетаскиванием
Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
        body{
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;;
        }
        .blok{
            max-width: 1200px;
            margin: 0 auto;
            display:flex;
            flex-direction: column;
            align-items: center;
        }
        .podpis{
            display: block;
        }
        .fertezj{
            width: 500px;
            height: 300px;
            cursor: crosshair;
            overflow: hidden;
            -webkit-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            -moz-box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            box-shadow: 0px 0px 16px 6px rgba(34, 60, 80, 0.6) inset;
            border: 4px solid rgba(34, 60, 80, 0.9);
            touch-action :none;
        }
        .fertezjХ img{
            width: 2000px;
            height: 2000px;
        }

    </style>
</head>

<body>
    <div class="blok">
        <p class="podpis">
            Размер блока 500*300<br>
            Размер фоновое изображение 2000*2000
        </p>
        <div class="fertezj"><img src="https://rakipov.ru/files/fon3.png" alt=""></div>
    </div>
<script>
   document.addEventListener( "DOMContentLoaded" , function() {

    document.querySelectorAll('.fertezj').forEach(el => {
    let _startX, _startY, _scrollLeft, _scrollTop;


    const pointerHandler = (event) => {
        const { screenX, screenY } = event;

        if(event.type === "pointerdown") {
            document.addEventListener("pointermove", pointerHandler);
            document.addEventListener("pointerup", pointerHandler);

            _startX = screenX;
            _startY = screenY;

            _scrollLeft = el.scrollLeft;
            _scrollTop = el.scrollTop;
        }

        if(event.type === "pointerup") {
            document.removeEventListener("pointermove", pointerHandler);
            document.removeEventListener("pointerup", pointerHandler);
        }

        if(event.type === "pointermove") {
            const dx = (screenX - _startX);
            const dy = (screenY - _startY);

            el.scrollTo(
                _scrollLeft - dx,
                _scrollTop - dy
            );
        }

        event.preventDefault();
    }

    el.addEventListener("pointerdown", pointerHandler);
    el.querySelector("img").addEventListener("load", _ => el.scrollTo(
                700,
                750
            ))
    })

        });
</script>
</body>
</html>

Последний раз редактировалось рони, 16.07.2021 в 12:01. Причина: touch-action :none; добавлено
Ответить с цитированием