Перемещение окна и прокрутка страницы в 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;
• в окне не должно находиться более чем одной вкладки.

Пример:

<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»:

// width и height – новая ширина и высота окна в пикселях
window.resizeTo(width, height);

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

// получаем 1/2 доступной ширины экрана в пикселях
const width = window.screen.availWidth / 2;
// получаем 1/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 $scrollUp = 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
$scrollUp.onclick = function (e) {
  // отменяем стандартное действие браузера (переход по ссылке)
  e.preventDefault();
  scroll({ top: 0, behavior: 'smooth' });
};
</script>