Для какого-либо элемента, использующего горизонтальную и вертикальную полосы прокрутки для отображения всего содержимого
Для какого-либо элемента, использующего горизонтальную и вертикальную полосы прокрутки для отображения всего содержимого, необходимо при загрузке переместить вертикальную полосу прокрутки на 150 пикселов, а горизонтальную — на 300.
Решение
Найдутся подходящие методы и для решения такой задачи — scrollTop() и
scrollLeft() (листинг 4.3.2).
Листинг 4.3 .2 . Использование методов scrollTop() и scrollLeft()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-4-3-2</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <style type="text/css"> #demo { width:300px; height:200px; overflow:auto; border:1px solid #369; } p { width:1000px; background-color:#ddd; border-bottom:1px dotted #69c; } </style> <script type="text/javascript"> $(function(){ $("#demo").scrollTop(150).scrollLeft(300); $("button").click(function(){ var d = $("#demo"); alert("scrollTop = " + d.scrollTop() + ", scrollLeft = " + d.scrollLeft()); }); }); </script> </head> <body> <p>Он поднял палец ... приближался.</p> <p>Кровь застыла ... взором зверя,</p> <p>попавшего в ... сучьями,</p> <p>и все это ... самоотверженных.</p> <p>Воздух вокруг ... поворачиваться,</p> <p>и тут свершилось ... самые глаза.</p> <p>Лавр Федотович ... осинника.</p> <p>Справа от меня... действием.</p> <button>Получить scrollTop и scrollLeft</button> </body> </html> |
ПРИМЕЧАНИЕ
Часть текста в листинге 4.3.2 опущена (заменена многоточиями). В соответствующем примере на прилагаемом компакт-диске текст приведен полностью, чтобы продемонстрировать работу методов.
Обсуждение
HTML-код, приведенный в листинге 4.3.2, — это элемент div с идентификатором
#demo, для которого с помощью CSS-свойств width и height заданы фиксированные значения ширины и высоты (300 и 200 пикселов соответственно). Значение auto, установленное для свойства overflow, определит появление вертикальной и горизонтальной полос прокрутки при необходимости. А такая необходимость будет, поскольку содержимое элемента div — несколько параграфов p шириной 1000 пикселов, что заведомо превышает размеры элемента div и по вертикали, и по горизонтали.
При загрузке страницы с помощью JavaScript-кода выбираем элемент #demo и применяем к нему методы scrollTop() и scrollLeft(), передавая им в виде аргументов числа 150 и 300. Когда страница загрузится, видим, что и вертикальная и горизонтальная полосы прокрутки находятся в требуемых положениях.
С помощью кнопки button, с которой связан обработчик события click, мы можем получить текущие значения. Попробуйте подвигать полосы прокрутки и нажать кнопку — в окне предупреждения будут выведены текущие значения.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Что такое селекторы и как их правильно использовать (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)