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

Александр Мальцев
14K
1
Содержание:
  1. Перемещение окна
  2. Изменение размеров окна
  3. Прокрутка документа
  4. Комментарии

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

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

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

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

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

window.moveTo(x, y);

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

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

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

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

window.moveTo(0, 0);

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

window.moveBy(deltaX, deltaY);

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

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

Метод moveBy() объекта window
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 с определёнными значениями:

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

Комментарии ()

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

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