Метод .scroll()

Ширина/высота веб-страницы с учётом прокрутки

Да теоретически, видимая часть страницы – это documentElement.clientWidth/Height, а вот полный размер с учётом полосы прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight.

Это верно для всех обычных элементов.

А вот для страницы с этими свойствами может возникнуть проблема, когда прокрутка то есть, то ее нет. В этом случае они работают некорректно. Надо сказать, что в браузерах Chrome/Safari и Opera при отсутствии полосы прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем documentElement.clientHeight, что, конечно же, выглядит как нечто не логичное

Эта проблема может возникать именно для documentElement.

А вот надёжно определить размер страницы с учетом прокрутки можно, просто взяв максимум из этих нескольких свойств:

var scrollVisota = Math.max(
  document.body.scrollVisota, document.documentElement.scrollHeight,
  document.body.offsetVisota, document.documentElement.offsetHeight,
  document.body.clientVisota, document.documentElement.clientHeight
);
alert( 'Высота с учетом прокрутки: ' + scrollVisota );

Синтаксис

Для ScrollBar Частныйобъект Sub _ Scroll()

Для multiPage Частныйобъект Sub _ Scroll (индекс****As Long, ActionXКак fmScrollAction, ActionYКак fmScrollAction, ByValrequestDxas single, ByValRequestDyas Single, ByValActualDxКак MSForms.ReturnSingle, ByValActualDyAs MSForms.ReturnSingle)

Для frame Частныйобъект Sub _ Scroll (ActionXAs fmScrollAction, ActionYКак fmScrollAction, ByValrequestDxas single, ByValRequestDyas Single, ByValActualDxКак MSForms.ReturnSingle, ByValActualDyAs MSForms.ReturnSingle)

Синтаксис события Scroll состоит из следующих частей:

Part	Описание
object	Обязательный. Допустимое имя объекта.
index	Обязательный. Индекс страницы в multiPage, связанной с этим событием.
ActionX	Обязательный. Действие, которое выполняется по горизонтали.
ActionY	Обязательный. Действие, которое выполняется по вертикали.
RequestDx	Обязательный. Расстояние в точках, на которое нужно, чтобы строка прокрутки перемещается в горизонтальном направлении.
RequestDy	Обязательный. Расстояние в точках, на которое нужно переместить планку прокрутки в вертикальном направлении.
ActualDx	Обязательный. Расстояние в точках, которое полоса прокрутки перемещается в горизонтальном направлении.
ActualDy	Обязательный. Расстояние в точках, на которое прокрутка перемещается в вертикальном направлении.

Кнопка и прокрутка страницы вверх через HTML и CSS.

<body>в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию<div><a id=’~~top~~‘/></div>
id<div><a href=»#top» class=»idTop»>ВВЕРХ</a></div>
добавим CSSa.idTop {
position: fixed; /*позиционирование кнопки фиксированное*/
z-index: 9999; /*отображаем поверх всех элементов*/
bottom: 0%; /*положение снизу*/
right: 0%; /*положение справа*/
background: #7db9e8; /*фон, можно указать любую картинку*/
opacity: .6; /*прозрачность*/
color: #fff; /*цвет текста*/
padding: 10px; /*внутренние отступы*/
margin: 5px 15px 15px 5px; /*внешние отступы*/
}
a.idTop:hover {
opacity: 1;
}
<div><a href=»#top» class=»idTop»><img src=’…/myimage.png’/>
</a></div>

scrollWidth/Height

Эти свойства – как , но также включают в себя прокрученную (которую не видно) часть элемента.

На рисунке выше:

– полная внутренняя высота, включая прокрученную область.
– полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна .

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.

Таким кодом:

Нажмите на кнопку, чтобы распахнуть элемент:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

element.style.height =

Перемещение окна

В JavaScript имеются следующие методы объекта для перемещения окна:

– абсолютное перемещение окна в указанные координаты экрана;
– перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода «»:

window.moveTo(x, y);

// x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера

Пример, в котором переместим окно в точку (50, 75):

window.moveTo(50, 75);

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

window.moveTo(0, 0);

Синтаксис метода «»:

window.moveBy(deltaX, deltaY);

// deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения

Например, сдвинем окно на 75px вправо и на 100px вниз:

window.moveBy(75, 100);

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

окно (или вкладка) должно быть создано с помощью ;
в окне не должно находиться более чем одной вкладки.

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open('', '', 'width=200,height=200');
}
function moveWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.moveTo(300,300);
    myWindow.focus();
  }
}
function moveWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.moveBy(x,y);
    myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="moveWindowTo()">Переместить левый угол окна в точку (300,300)</button>
<button onclick="moveWindowBy(50,50)">Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз</button>
<button onclick="moveWindowBy(-50,0)">Переместить окно относительно его текущего положения на 50px влево</button>
<button onclick="moveWindowBy(50,0)">Переместить окно относительно его текущего положения на 50px вправо</button>
<button onclick="moveWindowBy(0,-50)">Переместить окно относительно его текущего положения на 50px вверх</button>
<button onclick="moveWindowBy(0,50)">Переместить окно относительно его текущего положения на 50px вниз</button>

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .scroll() (без параметров и с функцией)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "div" ).scroll(); // вызываем событие "scroll" на элементе <div>
	  });
	  $( "div" ).scroll(function(){ // задаем функцию при срабатывании события "scroll" на элементе <div>
	    $( "span" ).text( "Scroll" ) // добавляем текстовое содержимое в элемент <span>
	               .css({ 
	                 "display": "inline", // элемент <span> отображается как строчный
	                 "color": "red" // цвет текста красный
	               })
	               .fadeOut( "fast" ); //  плавно изменяем прозрачность элемента <span>
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button><span></span><br><br>
		<div style = "overflow: scroll; width: 150px; height: 150px;">
			Ромашка — род многолетних цветковых растений семейства Астровые, или Сложноцветные (Asteraceae), объединяет около двадцати видов невысоких пахучих трав, цветущих в первый год жизни. Наиболее известный вид — Ромашка аптечная (Matricaria chamomilla, syn. Matricaria recutita), это растение широко используется в лечебных и косметических целях.
		</div>
	</body>
</html>

В этом примере с использованием jQuery метода .scroll() мы при нажатии на элемент <button> (кнопка) вызываем событие «scroll» на элементе <div>, которому задали, что при срабатывании события «scroll» необходимо добавить с использованием jQuery метода .text() текстовое содержимое в элемент <span>, с использованием метода .css() установить этому элементу цвет текста красный и строчное отображение, после этого с использованием эффекта .fadeOut() плавно изменить прозрачность элемента для его скрытия.

Обратите внимание, что эффект .fadeOut() устанавливает по завершению элементу свойство display в значение none (элемент не отображается), по этой причине мы каждый раз устанавливаем, что элемент должен быть строковый, для его отображения при следующем срабатывании события «scroll». При изменении положения прокрутки элемента событие «scroll» будет срабатывать как и при нажатии на элемент

Результат нашего примера:

Пример использования jQuery метода .scroll() (без параметров и с функцией)jQuery события

Прокрутка документа

В JavaScript имеются следующие методы объекта для прокрутки документа:

() — прокручивает страницу до указанного места в абсолютном выражении;
— прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода (метод выполняет то же самое, что и не отличается по синтаксису):

// 1 вариант
window.scroll(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scroll({
  left: 0, // до какого количества пикселей прокрутить вправо
  top: 0, // до какого количество пикселей прокрутить вниз
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Синтаксис метода :

// 1 вариант
window.scrollBy(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scrollBy({
  left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции
  top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод или с определёнными значениями:

Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить .

Попробуйте сами:

Первая кнопка останавливает прокрутку, вторая возобновляет её.

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для .

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить до и после остановки, и если увеличится (значит полоса прокрутки исчезла), то добавить в вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

Являются ли они адаптивными?

Если нам нужно реализовать адаптивные эффекты прокрутки, необходимо определить следующие свойства:

Свойство окна браузера ;
Свойство окна браузера .

Без этих свойств наши эффекты прокрутки будут “статичными”, и не будут правильно работать при изменении пользователем размера окна по вертикали или по горизонтали.

Эти значения легко можно получить с помощью jQuery методов width() и height().

Следующий фрагмент кода демонстрирует необходимые проверки для реализации эффекта прокрутки.

$(window).scroll(function() {
    if ($(this).width() < 992) {
        if ($(this).height() <= 768) {
            if ($(this).scrollTop() < 500) {
                // apply effects
            }
            if($(this).scrollTop() > 1000) {
            // apply effects
            }
        }
    }
});

Теперь, когда мы определились с основами эффектов прокрутки, давайте посмотрим на них в действии на основе четырех примеров.

Для упрощения мы фокусируемся только на проверке того, как эффекты будут меняться в зависимости от различных значений свойств окна и .

Получение текущей прокрутки

Если у обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

То , что же со страницей?

Дело в том, что большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых вам следует использовать document.body.

Ну а, чтобы вообще обойти эту проблему, вы можете использовать свойства window.pageXOffset/pageYOffset:

alert( 'Текущая прокрутка сверху: ' + window.pageYOffset );
alert( 'Текущая прокрутка слева: ' + window.pageXOffset );

Эти все свойства:

Не поддерживаются IE8-
Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает вариант на documentElement:

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
alert( "Текущая прокрутка: " + scrollTop );

offsetParent, offsetLeft/Top

Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.

В свойстве находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.

То есть, ближайший предок, который удовлетворяет следующим условиям:

Является CSS-позиционированным (CSS-свойство равно , , или ),
или , , ,
или .

Свойства содержат координаты x/y относительно верхнего левого угла .

В примере ниже внутренний имеет элемент в качестве , а свойства являются сдвигами относительно верхнего левого угла ():

Существует несколько ситуаций, когда равно :

Для скрытых элементов (с CSS-свойством или когда его нет в документе).
Для элементов и .
Для элементов с .

Не стоит брать width/height из CSS

Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.

Но как мы знаем из главы Стили и классы, CSS-высоту и ширину можно извлечь, используя .

Так почему бы не получать, к примеру, ширину элемента при помощи , вот так?

Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:

Во-первых, CSS-свойства зависят от другого свойства – , которое определяет, «что такое», собственно, эти CSS-ширина и высота. Получается, что изменение , к примеру, для более удобной вёрстки, сломает такой JavaScript.
Во-вторых, CSS свойства могут быть равны , например, для инлайнового элемента:

Конечно, с точки зрения CSS – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в , который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

Есть и ещё одна причина: полоса прокрутки. Бывает, без полосы прокрутки код работает прекрасно, но стоит ей появиться, как начинают проявляться баги. Так происходит потому, что полоса прокрутки «отъедает» место от области внутреннего содержимого в некоторых браузерах. Таким образом, реальная ширина содержимого меньше CSS-ширины. Как раз это и учитывают свойства .

…Но с ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину с вычетом ширины полосы прокрутки, а некоторые (например, Firefox) – именно CSS-свойство (игнорируя полосу прокрутки). Эти кроссбраузерные отличия – ещё один повод не использовать , а использовать свойства-метрики.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

У элемента с текстом в стилях указано CSS-свойство .

На ОС Windows браузеры Firefox, Chrome и Edge резервируют место для полосы прокрутки. Но Firefox отображает , в то время как Chrome и Edge – меньше. Это из-за того, что Firefox возвращает именно CSS-ширину, а остальные браузеры – «реальную» ширину за вычетом прокрутки.

Обратите внимание: описанные различия касаются только чтения свойства из JavaScript, визуальное отображение корректно в обоих случаях

jQuery плагин прокрутки веб-страницы вверх

плавно прокручивает страницу вверх;кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху; имеет маленький размер и работает во всех браузерах.HTML код<a href=»#» id=»~~toTop~~«></a>
CSS#toTop {
position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: #F4FFBF;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
color: #666;
text-decoration: none;
width:100px;
}
#toTop {
position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: url(‘…/yuor_image_64x64.png’) no-repeat;
width: 64px;
height: 64px;
border: none;
padding: 5px;
cursor: pointer;
color: transparent;
text-decoration: none;
}
</head>$(function(){
$.fn.scrollToTop=function(){
$(this).hide().removeAttr(«href»);
if($(window).scrollTop()!=»0″){
$(this).fadeIn(«slow»)
}
var scrollDiv=$(this);
$(window).scroll(function(){
if($(window).scrollTop()==»0″){
$(scrollDiv).fadeOut(«slow»)
}else{
$(scrollDiv).fadeIn(«slow»)
}
});
$(this).click(function(){
$(«html, body»).animate({scrollTop:0},»slow»)
})
}
});
$(function() {$(«#toTop»).scrollToTop();});
http://magentawave.com

Параметры

Параметрами для ActionX и ActionY являются:

Константа	Значение	Описание
fmScrollActionNoChange	Никаких изменений не происходит.
fmScrollActionLineUp	1	Небольшое расстояние вверх по вертикальной полосе прокрутки. Перемещение эквивалентно нажатию на клавиатуре клавиш СТРЕЛКА ВВЕРХ или СТРЕЛКА ВЛЕВО для перемещения по полосе прокрутки.
fmScrollActionLineDown	2	Небольшое расстояние вниз по вертикальной полосе прокрутки; небольшое расстояние вправо по горизонтальной полосе прокрутки. Перемещение эквивалентно нажатию на клавиатуре клавиш СТРЕЛКА ВНИЗ или СТРЕЛКА ВПРАВО для перемещения по полосе прокрутки.
fmScrollActionPageUp	3	На одну страницу вверх по вертикальной полосе прокрутки; на одну страницу влево по горизонтальной полосе прокрутки. Перемещение эквивалентно нажатию на клавиатуре клавиши PAGE UP для перемещения по полосе прокрутки.
fmScrollActionPageDown	4	На одну страницу вниз по вертикальной полосе прокрутки; на одну страницу вправо по горизонтальной полосе прокрутки. Перемещение эквивалентно нажатию на клавиатуре клавиши PAGE DOWN для перемещения по полосе прокрутки.
fmScrollActionBegin	5	Верх вертикальной полосы прокрутки; левый конец горизонтальной полосы прокрутки.
fmScrollActionEnd	6	Низ вертикальной полосы прокрутки; правый конец горизонтальной полосы прокрутки.
fmScrollActionPropertyChange	8	Изменено значение или свойства ScrollTop или свойства ScrollLeft. Направление и величина перемещения зависят от того, какое свойство было изменено и от нового значения свойства.
fmScrollActionControlRequest	9	Элемент управления запрашивает прокрутку у своего контейнера. Величина перемещения зависит от задействованного элемента управления и контейнера.
fmScrollActionFocusRequest	10	Пользователь перемещается к другому элементу управления. Величина перемещения зависит от местонахождения выбранного элемента управления, и в общем случае имеется эффект перемещения выбранного элемента управления, так что он полностью видим для пользователя.

Определение и применение

jQuery метод .scroll() привязывает JavaScript обработчик событий «scroll» (срабатывает при прокрутке элементов), или запускает это событие на выбранный элемент.

Обратите внимание на то, что событие «scroll» посылается, когда изменяется положение прокрутки элемента, независимо от причины, будь-то щелчок мыши на полосе прокрутки, или перетаскивание полосы прокрутки, перетаскивание внутри элемента, при нажатии клавиш со стрелками, или перемещение с помощью колеса мыши. Событие «scroll» допускается устанавливать не только на объект window, но и на фреймах (элементы ), элементах, свойство overflow которых установлено в scroll, или в auto, когда высота, или ширина элемента меньше, чем высота, или ширина его содержимого

Событие «scroll» допускается устанавливать не только на объект window, но и на фреймах (элементы <iframe>), элементах, свойство overflow которых установлено в scroll, или в auto, когда высота, или ширина элемента меньше, чем высота, или ширина его содержимого.

offsetWidth/Height

Теперь переходим к самому элементу.

Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.

Для нашего элемента:

– внешняя ширина блока, её можно получить сложением CSS-ширины (), внутренних отступов () и рамок ().
– внешняя высота блока.

Метрики для не показываемых элементов равны нулю.

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Если элемент (или любой его родитель) имеет или отсутствует в документе, то все его метрики равны нулю (или , если это ).

Например, свойство равно , а и равны , когда мы создали элемент, но ещё не вставили его в документ, или если у элемента (или у его родителя) .

Мы можем использовать это, чтобы делать проверку на видимость:

Заметим, что функция также вернёт для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые ).

Пример №3

Третий эффект зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 1750px;
Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 1150px;
Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 850px.

Код для вышеприведенных случаев представлен ниже:

if ($(window).width() <= 549){
    if($(window).scrollTop() > 1750){
        secondAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 1150) {
        secondAnimation();
    }
} else {
    if ($(window).scrollTop() > 850) {
        secondAnimation();
    }
}

Код выполняемой анимации выглядит следующим образом:

var secondAnimation = function() {
    $('.method:eq(0)').delay(1000).animate({
                opacity: 1
            }, 'slow',
            function() {
                $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(1)').delay(2000).animate({
                opacity: 1
            }, 'slow',
            function() {
                $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(2)').delay(3000).animate({
                opacity: 1
            }, 'slow',
            function() {
                $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(3)').delay(4000).animate({
                opacity: 1
            }, 'slow',
            function() {
                $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );
};

Вышеприведенный код последовательно изменяет свойство элементов , а затем меняет свойство дочерних элементов .

Что делать с дополнительным текстом?

Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:

Перепишите текст, чтобы он стал короче.
Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
Обрежьте текст там, где он выходит за пределы контейнера.
Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.

Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.

HTML и CSS для этого:

overflow: auto; указывает браузеру добавлять полосы прокрутки (скролл), если текст выходит за границы блока div.

Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.

Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden. Если вы не укажете свойство overflow, скролл на сайте работать не будет, и текст будет выходить за границы блока div.

Примечания

События прокрутки, связанные с формой, кадром или страницей, возвращают следующие аргументы: ActionX, ActionY, ActualX и ActualY. Аргументы ActionX и ActionY идентифицируют выполняемое действие. Аргументами ActualX и ActualY определяется расстояние, на которое переместился ползунок.

Действие по умолчанию — вычисление нового положения ползунка и последующая прокрутка в это положение.

Можно инициировать событие Scroll, выпустив метод Scroll для формы, кадра или страницы. Пользователи могут генерировать события Scroll, перемещая ползунок.

Событие Scroll, связанное с отдельной панелью прокрутки, указывает, что пользователь переместил поле прокрутки в любом направлении. Это событие не инициируется, когда значение ScrollBar изменяется кодом или пользователем, щелкающим части элемента ScrollBar, отличные от ползунка.

Прокрутка «overflow: scroll»

В принципе, по поведению scroll и auto похожи… вы можете потренироваться. заменить scroll на auto и обратно…

Зададим нашему блоку размер «width: 200px;»

Внутри него сделаем второй блок, который будет больше нашего выше приведенного размера «width: 500px;»

И для примера прокрутки используем «overflow: scroll;»

Разместим приведенный код прокрутки ниже:

как сделать прокрутку html — overflow: overflow: scroll; как сделать прокрутку html — overflow: overflow: scroll; как сделать прокрутку html — overflow: overflow: scroll; как сделать прокрутку html — overflow: overflow: scroll;

Итоги

Размеры:

Для получения размеров видимой части окна используется свойство: document.documentElement.clientWidth/Height

Для получения размеров страницы с учётом прокрутки следует использовать:

var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

Прокрутка окна:

Прокрутку окна вы можете получить как window.pageYOffset (для горизонтальной – window.pageXOffset) везде, кроме браузера IE8-. На всякий случай – вот вам самый кросс-браузерный способ, учитывающий, также и IE7- в том числе:
var html = document.documentElement;
var body = document.body;

var scrollTop = html.scrollTop || body && body.scrollTop || 0;
scrollTop -= html.clientTop; // в IE7- смещён относительно (0,0)

alert( «Текущая прокрутка: » + scrollTop );

Установить прокрутку вы можете при помощи следующих специальных методов:
- window.scrollTo(pageX,pageY) – абсолютные координаты,
- window.scrollBy(x,y) – прокрутить относительно от текущего места.
- elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.