JS-событие при попадании элемента в поле зрения?

Question

inryuuzsb @inryuuzsb

JavaScript

JS-событие при попадании элемента в поле зрения?

Здравствуйте, как я понимаю такого события в чистом виде нету. Скажите пожалуйста, как его возможно реализовать на нативном JS?
На просторах тостера попал на аналогичный скрипт на JQuery:
https://toster.ru/q/217548
но, к сожалению, я с ним не знаком :(

Вопрос задан более трёх лет назад
907 просмотров

5 комментариев

Подписаться 1 Средний 5 комментариев

Froggyweb @Froggyweb

но, к сожалению, я с ним не знаком :(

не знаком с кем? ну вот библиотека без jquery https://github.com/mkay581/scroll-js

Написано более трёх лет назад
inryuuzsb @inryuuzsb Автор вопроса

Froggyweb, на 6 кб? Спасибо, до свидания юный тролль

Написано более трёх лет назад
Froggyweb @Froggyweb

О мудрый, вешай событие скролл на документ и проверяй позиции что там у тебя в вьюпорт попадает.

Написано более трёх лет назад
inryuuzsb @inryuuzsb Автор вопроса

Froggyweb, не, буду node.js ставить, как ты посоветовал, знал бы как/за что ухватиться не спрашивал

Написано более трёх лет назад
Froggyweb @Froggyweb

inryuuzsb, Ты либо бредишь либо..... ты не можешь подключить js c github без npm? а node.js поставь, пригодится практически во всех случаях.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

dm_iset @dm_iset
Хорошее решение, но стоило бы добавить описание.
Для тех, кому было непонятно - вы можете перейти по ссылке - там есть описание по установке.
Если кратко, то
1. есть несколько способов размещения скрипта на сайте, обычный min.js(как указано выше), requireJS, ES6.module. Для своего решения - я просто скачал js и добавил на сервер, чтобы не использовать внешний.
2. вы должны создать экземпляр класса OnScreen
3. для использования применяются методы on('enter/leave', selector, callback) и off('enter/leave', selector, callback)
Пример:

var os = new OnScreen() // Do something when an element enters the viewport os.on('enter', 'img', function (element, event) { console.log(element); }) // Do something when an element enters the viewport os.on('enter', 'video', function (element, event) { console.log(element); })
Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 6 часов назад
- 54 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как совместить JS и Django?
- 1 подписчик
- 7 часов назад
- 49 просмотров
1

ответ
JavaScript

Сложный
Как сделать горизонтальный виртуальный скролл?
- 1 подписчик
- 8 часов назад
- 43 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему падает локальный сервер?
- 1 подписчик
- 12 часов назад
- 76 просмотров
0

ответов
JavaScript

Простой
Отмена дефолтного поведения?
- 1 подписчик
- 12 часов назад
- 79 просмотров
1

ответ
JavaScript

Простой
Как работают фигурные скобки в javascript?
- 1 подписчик
- 13 часов назад
- 113 просмотров
2

ответа
JavaScript

Простой
Почему в консоли выводится 6 и 340?
- 1 подписчик
- 14 часов назад
- 79 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 14 часов назад
- 67 просмотров
1

ответ
JavaScript

+1 ещё

Простой
В чем заключается суть бинарного поиска неотсортированного массива?
- 1 подписчик
- вчера
- 511 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- вчера
- 38 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Интеграция Битрикс в наше FastAPI приложение

01 мая 2024, в 02:11

5000 руб./за проект

Правки в макет Figma

01 мая 2024, в 00:29

2000 руб./за проект

Верстка сайта

01 мая 2024, в 00:20

15000 руб./за проект

но, к сожалению, я с ним не знаком :(

не знаком с кем? ну вот библиотека без jquery https://github.com/mkay581/scroll-js
Froggyweb, на 6 кб? Спасибо, до свидания юный тролль
О мудрый, вешай событие скролл на документ и проверяй позиции что там у тебя в вьюпорт попадает.
Froggyweb, не, буду node.js ставить, как ты посоветовал, знал бы как/за что ухватиться не спрашивал
inryuuzsb, Ты либо бредишь либо..... ты не можешь подключить js c github без npm? а node.js поставь, пригодится практически во всех случаях.

Answer 1 · 2018-04-06 23:38:34

https://github.com/silvestreh/onScreen

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Your regular head tags -->
    </head>
    <body>
        <!-- Your regular body -->
        <script type="text/javascript" src="https://unpkg.com/onscreen/dist/on-screen.umd.min.js"></script>
        <script type="text/javascript">
            var os = new OnScreen();
        </script>
    </body>
</html>

Answer 2 · 2018-04-07 09:26:01

https://codepen.io/topicstarter/pen/RMqpme?editors=0110

Ну вот смотри - сначала я получил высоту экрана клиента
и потом разделил на два и при совпадении этих координат я присвоил элементу класс в котором прописана пульсация ....

JS-событие при попадании элемента в поле зрения?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт