Как реализовать активацию скрипта только при определенной ширине экрана?

Question

[Kardamon90]

Подскажите, как сделать так, что при достижении определенной ширины страницы у блока активировался допустим слик слайдер

Comments

[Сергей Сергей]

window onresize
https://developer.mozilla.org/en-US/docs/Web/API/W...

Answer 1

[Сергей delphinpro]

window.matchMedia !!!
resize неэффективен.

Answer 2

[Anonymous Penguin]

(window.onresize = function () {
  const screenWidth = document.body.offsetWidth;
  if (screenWidth <= 1000) { // число, в пикселях
    // код
  }
})();

Comments

[wadowad]

А разве не будет срабатывать только при ресайзе?

[Anonymous Penguin]

wadowad, внимательнее посмотри. Это IIFE (Immediately Invoked Function Expression). Мы сначала создаем функцию, а потом вызываем ее. На примере обычной функции:

// Длинная запись
function test() {
  // ...
}
test();

// Короткая запись
(function test() {
  // ...
})();

// Эквивалент короткой записи:
function test() {
  // ...
}
(test)();

И как работает тут:

// Очень длинная запись:
function rsz() {
  // ...
}
window.onresize = rsz;
rsz();

// Длинная запись:
window.onresize = function () {
  // ...
}
window.onresize();

// Короткая запись (которая используется тут):
(window.onresize = function () {
  // ...
})();

[wadowad]

Anonymous Penguin, ооо прикольно, не знал про этот синтаксический сахар.

[Anonymous Penguin]

wadowad, это больше не сахар, а всего лишь особенность, которая следует из общего синтаксиса