1

посмотрите пожалуйста на мокап. Красные блоки - простой контент. Желтый блок слайдер. Подскажите пожалуйста каким образом можно сделать( можно описать даже логику) что бы когда человек докрутил желтый квадрат до конца экрана( Желтый квадрат имеет 100% высоту) останавливается скролл и начинается смена слайдов( После желтого блока будут еще блоки( просто их не нарисовал). Слайдер я делаю и смену при скролле тоже. Мне важно события что желтый блок находится в позиции top 0 по отношению к экрану введите сюда описание изображения

1 ответ 1

1

На CSS такого не сделаешь. А так как, я уверен, слайдер всё равно на JS, то не вижу проблем использовать JS.

Для этого надо использовать window.addEventListener("scroll") для отслеживания события скролла. А потом с помощью нехитрых получения позиций элементов высчитываем и запускаем слайдер.

window.addEventListener("scroll", activatedSlider)

function activatedSlider(e){
    var div = document.querySelector('.slider');
    var topDit = div.offsetTop;
    // Если просто e.pageY сделать, то не будет работать когда слайдер в самом низу появился, потому что это показывает верхнюю точку окна. Поэтому оптимально запускать слайдер когда он целиком появился на экране. Поэтому делаем такое не сложное вычисление
    var topPage = e.pageY + window.innerHeight - div.offsetHeight;
    if(topPage >= topDit){
        alert('Запускаем слайдер')
        // Уничтожаем событие
        window.removeEventListener('scroll', activatedSlider);
    }
}

https://jsfiddle.net/BaNru/5fewrhLc/

К сожалению там происходит двойное срабатывание, вероятно из-за асинхронности события addEventListener и более быстрого многократного срабатывания scroll. Поэтому запрет на повторную активацию слайдера необходимо добавить в сам слайдер, это несложно.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.