Перемещение окна и прокрутка страницы в JavaScript
В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).
Перемещение окна
В JavaScript имеются следующие методы объекта window
для перемещения окна:
moveTo
– абсолютное перемещение окна в указанные координаты экрана;moveBy
– перемещения окна на указанное количество пикселей относительно его текущего положения.
Синтаксис метода «window.moveTo
»:
window.moveTo(x, y); // x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера
Пример, в котором переместим окно в точку (50, 75):

window.moveTo(50, 75);
Пример, в котором произведём перемещение окна в левый верхний угол экрана:
window.moveTo(0, 0);
Синтаксис метода «window.moveBy
»:
window.moveBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения
Например, сдвинем окно на 75px вправо и на 100px вниз:

window.moveBy(75, 100);
В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:
- окно (или вкладка) должно быть создано с помощью
window.open
; - в окне не должно находиться более чем одной вкладки;
- при открытии окна с помощью «
window.open
» необходимо указать параметр «resizable
» (для возможности изменения его размера).
Пример:
<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>
Изменение размеров окна
Методы объекта window для изменения размеров окна:
resizeTo
– изменяет ширину (outerWidth
) и высоту (outerHeight
) окна на указанные значения;resizeBy
– изменяет ширину (outerWidth
) и высоту (outerHeight
) окна на указанные величины относительно его текущих размеров.
В JavaScript методы resizeTo
и resizeBy
выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).
Синтаксис «window.resizeTo
»:
window.resizeTo(width, height); // width и height – новая ширина и высота окна в пикселях
Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:
const width = window.screen.availWidth / 2; const height = window.screen.availHeight / 2; window.resizeTo(width, height);
Синтаксис «window.resizeBy
»:
window.resizeBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей на которые нужно увеличить размеры окна соответственно по горизонтали и вертикали
Например, уменьшим размеры окна (его ширину и высоту) на 50px:
window.resizeBy(-50, -50);
Пример:
<script> var myWindow; function openWindow() { myWindow = window.open("","","width=200,height=200"); } function resizeWindowTo() { if (myWindow && !myWindow.closed) { myWindow.resizeTo(300,300); myWindow.focus(); } } function resizeWindowBy(x,y) { if (myWindow && !myWindow.closed) { myWindow.resizeBy(x,y); myWindow.focus(); } } </script> ... <button onclick="openWindow()">Открыть окно</button> <button onclick="resizeWindowTo()">Изменить ширину и высоту окна браузера (300,300)</button> <button onclick="resizeWindowBy(25,25)">Увеличить ширину и высоту окна браузера на 25px</button> <button onclick="resizeWindowBy(-25,0)">Уменьшить ширину окна на 25px</button> <button onclick="resizeWindowBy(25,0)"> Увеличить ширину окна на 25px</button> <button onclick="resizeWindowBy(0,-25)"> Уменьшить высоту окна на 25px</button> <button onclick="resizeWindowBy(0,25)"> Увеличить высоту окна на 25px</button>
Прокрутка документа
В JavaScript имеются следующие методы объекта window
для прокрутки документа:
scroll
(scrollTo
) - прокручивает страницу до указанного места в абсолютном выражении;scrollBy
— прокручивает документ на определённое количество пикселей относительно текущей позиции.
Синтаксис метода scroll
(метод scrollTo
выполняет то же самое, что scroll
и не отличается по синтаксису):
// 1 вариант window.scroll(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scroll({ left: 0, // до какого количества пикселей прокрутить вправо top: 0, // до какого количество пикселей прокрутить вниз behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });
Синтаксис метода scrollBy
:
// 1 вариант window.scrollBy(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scrollBy({ left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });
Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll
или scrollBy
с определёнными значениями:

<a id="scrollDown" href="#">вниз мгновенно (до 2000)</a> <a id="scrollBy" href="#">вниз плавно (на +200)</a> <a id="scrollUp" href="#">вверх плавно (до 0)</a> <script> // получим ссылки по id const $scrollDown = document.querySelector('#scrollDown'); const $scrollBy = document.querySelector('#scrollBy'); const $scrollU = document.querySelector('#scrollUp'); // при нажатии на #scrollDown $scrollDown.onclick = function (e) { e.preventDefault(); scrollTo(0, 2000); }; // при нажатии на #scrollBy $scrollBy.onclick = function (e) { e.preventDefault(); scrollBy({ top: 200, behavior: 'smooth' }); }; // при нажатии на ##scrollUp $scrollU.onclick = function (e) { e.preventDefault(); scroll({ top: 0, behavior: 'smooth' }); }; </script>
Комментарии ()