Блог

Главная - Вопросы по программированию - Отображение div / button, если движение не обнаружено через 2 секунды

Отображение div / button, если движение не обнаружено через 2 секунды

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

Есть ли способ сделать так, чтобы уведомление или div появлялись через 2 секунды, если прокрутка не произошла? По сути, я просто после появления элемента с надписью «Прокрутите влево ->». У меня возникли проблемы даже с описанием того, что мне нужно, и я еще не пытался это сделать. Если бы кто-нибудь мог просто указать мне правильное направление, это было бы здорово 🙂

HTML:

 <!DOCTYPE html> 
<html>
    <head>
    <body>
            <div class='container'>
              <img src='https://images.unsplash.com/photo-1514117445516-2ecfc9c4ec90?ixlib=rb-0.3.5amp;amp;q=85amp;amp;fm=jpgamp;amp;crop=entropyamp;amp;cs=srgbamp;amp;ixid=eyJhcHBfaWQiOjE0NTg5fQamp;amp;s=0e0b58fcf67fa6e8a010322d617e39af' alt='Mountain massif, sunbathed, partly covered in show.'/>
            </div>
    </body>
</html>

CSS:

 * { margin: 0 }

body { overflow: hidden; /* Hide scrollbars */ }

.container {
    --n: 1;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    width: 100%; // fallback
    width: calc(var(--n)*100%);
    height: 100vh;
    transform: translate(calc(var(--i, 0)/var(--n)*-100%));
    transition: transform .5s ease-out;
    
    img {
        width: 100%; // fallback
        height: 100%; 
        object-fit: contain;
/*      width: calc(100%/var(--n)); */
/*      user-select: none; */
/*      pointer-events: none */
    }
}

JS:

 const _C = document.querySelector('.container'), N = _C.children.length;

let i = 0, x0 = null;

function unify(e) { return e.changedTouches ? e.changedTouches[0] : e };

function lock(e) { x0 = unify(e).clientX };

function move(e) {
    if(x0 || x0 === 0) {
        let dx = unify(e).clientX - x0, s = Math.sign(dx);

        if((i > 0 || s < 0) amp;amp; (i < N - 1 || s > 0))
            _C.style.setProperty('--i', i -= s);
        x0 = null
    }
};

_C.style.setProperty('--n', N);

_C.addEventListener('mousedown', lock, false);
_C.addEventListener('touchstart', lock, false);

_C.addEventListener('touchmove', e => { e.preventDefault() }, false);

_C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false);

Комментарии:

1. Я не следил за вашим кодом, но эта скрипка JS прослушивает события прокрутки и соответствующим образом отображает предупреждение.