Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Работа со скролом


Автор: champion 19.6.2006, 19:43
Объясните и покажите пожалуйста работу со скролом, как в iframe так и в элементах у которых установлен параметр overflow 

Автор: [xoodo] 19.6.2006, 23:17
Про overflow -- на http://www.w3schools.com/css/pr_pos_overflow.asp. Дерзай.

Добавлено @ 23:20 
Какое отношение к Яваскрипту?
Код
document.getElemenById('myElement').style.overflow = auto | hidden | scroll | visible

Об этом речь? 

Автор: Sardar 20.6.2006, 01:31
Элемент имеет некий бокс, в нём некое окно под контент, это обычный (блочный) элемент согласно CSS. Теперь представим что экран это страница лежащая сверху, под ней ещё одна страница с другим контентом, окно контента это вырез в экране. Страничка что под экраном может двигаться, экран не подвижен. Собсно скролинг это и есть движение странички под экраном, назовём её контент-страница.

Контент-страница имеет ограниченные размер, он в принципе всегда больше чем "окошко", потому и скролим. Параметры scrollHeight и scrollWidth отвечают за размер контент-страницы. Как уже говорили контент-страница плавает, отсюда получаеться скролинг, контент-страница может смещаться относительно "окошка". Если левый верхний угол контент-страницы совпадает с левых верхнем улгом "окошка", то смещение 0, далее соотвественно позитивное или негативное в пикселах. За смещение отвечают параметры scrollTop и scrollLeft.

Ну и наконец "окошко", как мы уже говорили это область контента элемента. Естественно имеет размеры, параметры offsetWidth и offsetHeight. Позицию относительно первого "якорного предка" узнаём из параметров offsetLeft и offsetTop. Якорный предок это родительский первый элемент с релативной или абсолютной позицией, т.е. двигают родителя, мы тоже двигаемся. Если узнать координаты относительно всего экрана нужно, то бежим по всей иерархии "якорных предков" посредством параметра offsetParent. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)