Меню
Pull to refresh, не большой скрипт  для обновления страницы, при перетягивании, на мобильных телефонах.
Можно использовать и в мобильном приложении на cordova/phonegap
стили можно перенсти в style.css

Код
(function () {
    if (!('ontouchstart' in window)) return; // Только на тач-устройствах

    function initPullToRefresh() {
        var startY = null;
        var dist = 0;
        var threshold = 70;
        var maxDist = 150;
        var pulling = false;
        var refreshTriggered = false;

        var spinner = document.createElement('div');
        spinner.style.position = 'fixed';
        spinner.style.top = '0';
        spinner.style.left = '0';
        spinner.style.right = '0';
        spinner.style.height = '50px';
        //spinner.style.background = 'white';
        spinner.style.display = 'flex';
        spinner.style.justifyContent = 'center';
        spinner.style.alignItems = 'center';
        spinner.style.fontSize = '24px';
        spinner.style.color = '#007aff';
        spinner.style.transform = 'translateY(-50px)';
        spinner.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
        spinner.style.zIndex = '9999';
        spinner.style.opacity = '0';
        spinner.innerHTML = `
              <svg style="width:24px; height:24px; animation: spin 1s linear infinite;" viewBox="0 0 50 50" >
                <rect x="10" y="10" width="30" height="30" stroke="#007aff" stroke-width="5" fill="none" />
              </svg>
            `;
        document.body.appendChild(spinner);

        var styleEl = document.createElement('style');
        styleEl.innerHTML = `
      @keyframes spin {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(360deg);}
      }
    `;
        document.head.appendChild(styleEl);

        // Проверяем, что прокрутка body/doc вверху
        function canPullToRefresh() {
            // Совместимый вариант для любых браузеров:
            return (window.pageYOffset || document.documentElement.scrollTop) === 0;
        }

        function onTouchStart(e) {
            if (canPullToRefresh() && !refreshTriggered) {
                startY = e.touches[0].screenY;
                pulling = true;
                dist = 0;
                spinner.style.transition = 'none';
                spinner.style.opacity = '1';
            }
        }

        function onTouchMove(e) {
            if (!pulling) return;
            var currentY = e.touches[0].screenY;
            dist = currentY - startY;
            if (dist > 0) {
                e.preventDefault(); // Блокируем скролл вниз при протягивании
                var moveDist = Math.min(dist, maxDist);
                spinner.style.transform = 'translateY(' + (moveDist - 50) + 'px)';
                if (moveDist > threshold) {
                    spinner.style.color = '#007aff';
                } else {
                    spinner.style.color = '#999';
                }
            } else {
                spinner.style.transform = 'translateY(-50px)';
                spinner.style.opacity = '0';
                pulling = false;
            }
        }

        function onTouchEnd(e) {
            if (!pulling) return;
            spinner.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
            if (dist > threshold) {
                refreshTriggered = true;
                spinner.style.transform = 'translateY(0px)';
                spinner.style.opacity = '1';
                window.location.reload();
            } else {
                spinner.style.transform = 'translateY(-50px)';
                spinner.style.opacity = '0';
            }
            pulling = false;
            startY = null;
            dist = 0;
        }

        window.addEventListener('touchstart', onTouchStart, {passive: false});
        window.addEventListener('touchmove', onTouchMove, {passive: false});
        window.addEventListener('touchend', onTouchEnd);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPullToRefresh);
    } else {
        initPullToRefresh();
    }
})();
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
 

Блог-note: заметки разработчика

Дополнительные параметры в меню Битрикс

Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например открывать ссылку в новом окне и...

Заполнить поля пользователя из свойства заказа, на примере ФИО

При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в профиль пользователя (не путать...

Автоматический повтор заказа на D7 со списанием с внутреннего счета

На сайте товары и услуги доступны по подписке, пользователи пополняют внутренний счёт, после чего происходит автоматичес...

Массово: применить наценку ко всем товарам каталога с пересчетом от базовой.

Рассмотрим как, в магазине работающем на 1С-битрикс, массово применить наценку на все товары каталога. Устанавливать буд...

Обновление 1С-Битрикс с PHP 7, до поддержки версии PHP 8.3

Задача: обновить устаревший сайт на платформе 1С-Битрикс, который не получал обновлений уже более 4 лет и работает на PH...

Объединить отдельные поля ФИО в одно свойство при оформлении заказа.

Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отчеством. Нам нужно сохранить эт...

Сгенерировать скидочные купоны, при заказе и отправить на почту

Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны для скидки (правила корзины) и ...

Input Type File, множественный с дропзоной и показом превью

Задача: Сделать возможность загрузки файлов в множественный input type="file" c помощью drag&drop и показом превью загру...

Вывести все товары, с постраничной навигацией, из всех разделов инфоблока

По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е товаров вывести все товары вс...