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

Question

inryuuzsb @inryuuzsb

JavaScript

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

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

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

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 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 16 часов назад
- 113 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 22 часа назад
- 44 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 159 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 104 просмотра
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 706 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 75 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 44 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 151 просмотр
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 192 просмотра
5

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Сайт для оценки видеоролика в реальном времени

25 нояб. 2024, в 13:53

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

Разработка и поддержка на Битрикс: УС

25 нояб. 2024, в 13:48

1500 руб./в час

Написать алгоритм на assembler для процессора sharc adsp21060

25 нояб. 2024, в 13:42

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

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

не знаком с кем? ну вот библиотека без 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-событие при попадании элемента в поле зрения?

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

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

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