Перемещение окна и прокрутка страницы в JavaScript

Содержание:
  1. Перемещение окна
  2. Изменение размеров окна
  3. Прокрутка документа
  4. Комментарии

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

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

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

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

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

JavaScript
window.moveTo(x, y);

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

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

Метод moveTo() объекта window
JavaScript
window.moveTo(50, 75);

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

JavaScript
window.moveTo(0, 0);

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

JavaScript
window.moveBy(deltaX, deltaY);

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

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

Метод moveBy() объекта window
JavaScript
window.moveBy(75, 100);

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

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

Пример:

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

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

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

JavaScript
// получаем 1/2 доступной ширины экрана в пикселях
const width = window.screen.availWidth / 2;
// получаем 1/2 доступной высоты экрана в пикселях
const height = window.screen.availHeight / 2;
// устанавливаем окну ширину и высоту
window.resizeTo(width, height);

Синтаксис «window.resizeBy»:

JavaScript
window.resizeBy(deltaX, deltaY);

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

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

JavaScript
window.resizeBy(-50, -50);

Пример:

HTML
<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 и не отличается по синтаксису):

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

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

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

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

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

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

JavaScript Window API - Свойства scroll, scrollTo и scrollBy
HTML
<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>

Комментарии: 8

Анна
Анна

Добрый вечер, подскажите как создать html-страницу с новостями.

Необходимо отлавливать, когда скролл доходит до конца страницы, и догружать еще новости в список. Я немного написала, а дальше не знаю что делать.

Вот код:
const main = document.querySelector('main');
const spinner = document.querySelector('.spinner');
spinner.addEventListener('scroll', newArticle);
for (let i = 0; i < 3; i++) newArticle();

function newArticle() {
	const article = document.createElement('article');
  const h2 = document.createElement('h2');
	h2.textContent = 'What is Lorem Ipsum?';
  const paragraph = document.createElement('p');
	paragraph.textContent = genText();
  article.append(h2);
	article.append(paragraph);
  main.append(article);
}

function genText() {
	const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et porttitor neque, quis pretium lacus. Nulla porta nisi ex, vel ultricies arcu eleifend eu. Cras laoreet lacinia viverra. Mauris sit amet sollicitudin magna. Maecenas efficitur arcu eu pharetra porta. Etiam at fringilla nisi, eu ornare sem. Sed egestas urna ac lacus malesuada, et ultrices nunc vehicula. Quisque vitae nisl ut nibh varius porttitor. Curabitur ac massa pharetra, gravida risus in, congue neque."
    .replace(/[^\w\s]/g, "").toLowerCase().split(" ");
	let s = "";
  let wordCount = 20 + 100 * Math.random();
	for (let i = 0; i < wordCount; i++) {
    s += " " + lorem[Math.trunc(Math.random() * lorem.length)];
	  return s.replace(/^\s\w/, (c) => c.toUpperCase()) + ".";
  }
}

HTML такой:

<body>

<main> <div class="spinner"></div> </main> <script src="script.js"></script> </body>

Заранее спасибо за помощь.

Архаил
Архаил
Александр, добрый день.
подскажите, есть задача реализовать механизм самого скролла странице, к примеру есть какие-то элементы на странице, которые должны скролится поверх контента, только когда они прокрутятся, нужно фокус вернуть на базовый скролл самой страницы. Т.е. при загрузки страницы при старте скролла фокус попадает на элемент, он начинает скролится, потом дойдя до определенной высоты запускается второй элемент, двигаются уже два элемента, скорость может быть разной, дойдя до верха они останавливаются и фокус возвращается к скролу самой странице. Но если к примеру я скролю обратно в верх, то дойдя до последней высоты экрана, снова запускаю фокус на элементы и они возвращаются в свое изначальное состояние() при остановке скрола, они замирают там, где остановились на момент остановки скрола колеса. Подскажите, какой материал я могу почитать или где черпануть идеи реализации?
Благодарю.
Evgen
Evgen
Объясни, пожалуйста, что делает //e.preventDefault();
$scrollDown.onclick = function (e) {
  e.preventDefault();
  scrollTo(0, 2000);
};
// при нажатии на #scrollBy
$scrollBy.onclick = function (e) {
  e.preventDefault();
  scrollBy({ top: 200, behavior: 'smooth' });
};
Александр Мальцев
Александр Мальцев
Взаимодействия с некоторым элементами влекут за собой некоторые стандартные действия. Например, когда мы нажимаем на ссылку, браузер автоматически осуществляет переход на URL, указанный в ней (в href).

Когда мы обрабатываем реакцию на нажатие ссылки в JavaScript, то нам зачастую такое стандартное поведение не нужно. Чтобы его отменить мы вызываем метод preventDefault у объекта события (e), который создаёт браузер.
Evgen
Evgen
Еще этот пример непонятен мне:
const width = window.screen.availWidth / 2;
const height = window.screen.availHeight / 2;
window.resizeTo(width, height);
Из описания синтаксиса «resizeTo»:
// width и height – новая ширина и высота окна в пикселях
Но в примере не так. И, снова, не указан параметр «resizable».
Александр Мальцев
Александр Мальцев
В первой строчке мы получаем доступную ширину экрана (window.screen.availWidth) и делим полученное значение на 2. Сохраняем полученное значение в переменную width:
const width = window.screen.availWidth / 2;
Во второй строчке получаем доступную высоту экрана (window.screen.availHeight) и делим полученное значение на 2. Сохраняем полученное значение в переменную height:
const height = window.screen.availHeight / 2;
Доступная ширина и высота — это все доступное горизонтальное и вертикальное пространство экрана.
На последней строчке изменяем размеры окна с помощью метода resizeTo в соответствии со значениями, которые находятся в переменных width и height:
window.resizeTo(width, height);
Evgen
Evgen
Привет! Такой вопрос: написано, что для перемещения окна, должны быть выполнены некоторые условия. Окно открыто с помощью «window.open» и при указании параметра «resizable». В примере, сразу за этим условием, этого не сделано.
Я так понимаю, что здесь:
function openWindow() {
  myWindow = window.open("","","width=200,height=200");
}
Может быть, я что-то не так понял или в данный момент это уже не актуально?
Александр Мальцев
Александр Мальцев
Привет! Да, необходимы только 2 условия.