| |
|
|
| | Как сделать запуск JavaScript, при вертикальной прокрутке вниз до конца обеспечив при этом запуск JavaScript в любом или почти в любом браузере.
Кроссбраузерность | |
| |
|
|
| |
|
|
| |
для: Valleri
(18.05.2011 в 08:06)
| | | Посчитайте высоту тела документа, снимите координаты позиции скролла. Если разница составляет менее n пикселей - запуск. | |
| |
|
|
| |
|
|
| |
для: deimand
(18.05.2011 в 12:18)
| | | Так как сделать.
В разных браузерах- по разному. | |
| |
|
|
| |
|
|
| |
для: Valleri
(18.05.2011 в 12:39)
| | | Да нет, в большинстве - как раз одинаково.
var SH = document.body.scrollHeight; //высота страницы
var CH = document.body.clientHeight; //высота окна
document.body.scrollTop; //текущее положение скролла
|
SH и CH - фиксированы
document.body.scrollTop - меняется в зависимости от проскролленности страницы: от нуля до значения разности SH и CH.
Соответственно, код для искомого запуска скрипта: if (document.body.scrollTop >= (SH - CH)) alert ('Запуск');
PS. доктайп указывать не надо вовсе в данном случае. | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(18.05.2011 в 14:00)
| | | доктайп, можно спросить, что это?
мне известны такие слова pageYOffset
Хочется как тут http://vkontakte.ru/search
Вы человек сердечный, может подскажите | |
| |
|
|
| |
|
|
| |
для: Valleri
(18.05.2011 в 14:08)
| | |
<html>
<head>
<style>
html, body {height: 100%}
#mTBL {background-color: lime; width: 90%; height: 200%}
</style>
<script>
var T = 200;
var DELTA = 20; //выбранный Вами "запас недопроскроленности"- целое неотрицательное число
function mF ()
{
var DB = document.body;
if ((DB.scrollTop + DELTA) >= (DB.scrollHeight - DB.clientHeight))
{
//запуск нужного Вам скрипта. Здесь реализовано простое увеличение высоты таблицы
T += 100;
document.getElementById ('mTBL').style.height = T + '%';
}
}
</script>
</head>
<body onscroll="mF ()">
<table id="mTBL"><tr><td> </td></tr></table>
</body>
</html>
|
PS. доктайп - это тег, определяющий тип документа и соответствие его стандарту для этого типа. Если прописывается, то первым на странице (ещё до <html>). Например, так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(18.05.2011 в 14:39)
| | |
<html>
<head>
<style>
html, body {height: 100%}
#mTBL {background-color: lime; width: 90%; height: 200%}
</style>
<script>
var T = 200;
var DELTA = 20; //выбранный Вами "запас недопроскроленности"- целое неотрицательное число
ok=1;
var x1 = document.body.scrollTop ;
function mF ()
{
var DB = document.body;
if ((DB.scrollTop + DELTA) >= (DB.scrollHeight - DB.clientHeight))
{
ok++;
//запуск нужного Вам скрипта. Здесь реализовано простое увеличение высоты таблицы
document.getElementById('id1').insertAdjacentHTML("beforeEnd", ok +" код x1 = " +x1+ " clientHeight = " +document.body.clientHeight+ "<br>");
T += 100;
document.getElementById ('mTBL').style.height = T + '%';
}
}
</script>
</head>
<body onscroll="mF ()">
<table id="mTBL" cellpadding="0" cellspacing="0">
<div id="id1"><div>
<tr><td> </td></tr>
</table>
</body>
</html>
|
Чего то не то. Добавка для оживления жирная
Возможно нужно дополнительное условие.
Если последний элемент стал виден пользователю, то запуск.
Или Если последний элемент может увидеть пользователь, то запуск.
А в лисе не работает | |
| |
|
|
| |
|
|
| |
для: Valleri
(18.05.2011 в 15:09)
| | | Конечно - "не то".
1. var x1 = document.body.scrollTop;
Во-первых, на момент определения этой переменной объекта document.body ещё не существует.
Во вторых, document.body.scrollTop - величина ПЕРЕМЕННАЯ. Нельзя её определить раз и навсегда.
Эту переменную можно определять только ПОСЛЕ формирования тела документа и определять её надо КАЖДЫЙ раз при изменении проскролленности страницы.
2. <div id="id1"><div>
Вы для этого контейнера иного места, кроме как между тегами <table> и <tr> не нашли? :-)))
-----
Мой вариант - он у Вас работает?
Уверен, что работает - при подводе скроллбара на 20 пикселей к нижнему его положению скрипт запускается и высота таблицы меняется.
Причём работает ВЕЗДЕ (в том числе и в FF).
Вам нужен другой скрипт, добавляющий какой-то html-код?
Держите:
<html>
<head>
<style>
html, body {height: 100%}
body {margin-bottom: 100px}
</style>
<script>
var DELTA = 20;
var ok = 0;
function mF ()
{
var DB = document.body, x1 = DB.scrollTop;;
if ((DB.scrollTop + DELTA) >= (DB.scrollHeight - DB.clientHeight))
{
document.getElementById ('id1').insertAdjacentHTML ('beforeEnd', ++ok + ' êîä x1 = ' + x1 + ' scrollHeight = ' + DB.scrollHeight + '<br>');
}
}
</script>
</head>
<body onscroll="mF ()">
<div id="id1" style="margin-top: 1200px"> </div>
</body>
</html>
|
PS. Я использовал здесь Ваш метод insertAdjacentHTML, который в FF как раз не работает.
Для справки - в FF работает insertBefore
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(18.05.2011 в 15:39)
| | | Это спецом, что-бы вы человеком себя почувствовали, это раз
Это просто мышкой скопировано, это два
Только человек крутанет, увидит внизу пустоту и подумает конец странице, бросит сайт и уйдет и оставит вебмастера без денег, это три
Только в лисе, 3.1, не работает, а в ней на сайте 30%, это четыре.
Кроссбраузерности нет. Вам же писали pageYOffset
А так вещица путевая, полезная, главное на пользу всем людям.
Почти готово.
[поправлено модератором] | |
| |
|
|
