Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Находится ли блок в видимой части (https://javascript.ru/forum/css-html/45353-nakhoditsya-li-blok-v-vidimojj-chasti.html)

quizzer 24.02.2014 23:18

Находится ли блок в видимой части
 
Хотелось бы узнать, какими способами можно определить, находится ли блок в видимой части.
Я имею в виду не просто в пределы значений clientWidth/Height, а например, если блок находится в нижней части и не видим при начальной загрузке, то можно прокрутить вниз, и когда этот блок окажется в видимой части, то чтобы можно было выполнить определенную функцию javascript.
Надеюсь, понятно расписал.

danik.js 25.02.2014 02:19

.getBoundingClientRect()

рони 25.02.2014 14:56

quizzer,
Макет показывающий насколько виден блок

quizzer 26.02.2014 01:35

рони, эх, если бы еще на чистом javascript, jquery мне не вариант, но в целом я понял как делать, попробую реализовать

рони 26.02.2014 02:02

quizzer,
там практически всё на раз меняется -- все что нужно для замены Размеры и прокрутка для страницы и Координаты

рони 26.02.2014 02:38

quizzer, формула 100% видимости - обьект полностью видим.
var $myElement = document.getElementById(id),
  landmark = $myElement.getBoundingClientRect(),
  visibility = landmark.top > 0 && landmark.left > 0 && landmark.bottom <  document.documentElement.clientHeight   && landmark.right < document.documentElement.clientWidth

рони 26.02.2014 02:50

quizzer,
формула видимости хоть какой-то части обьекта
function checkViewport(id) {
     var $myElement = document.getElementById(id),
         landmark = $myElement.getBoundingClientRect(),
         visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth
     return visibility
 }


Часовой пояс GMT +3, время: 07:46.