Очень долго ломал голову, но никак не смог решить проблему.
Как видно, есть 3 бутстраповских блока: простой container , container art-projects и container-design-projects.
Я написал скрипт, который меняет местами два элемента: swap-element и swap-el второго блока art projects при ширине меньше 990 пикселей.
Проблема в том что они меняются еще до 990 пикселей (начиная 1005 пикселей), а это ломает мою верстку.
Вот ссылка на codepen
Помогите, а то запутался, почему же так происходит?
document.addEventListener("DOMContentLoaded", ()=> {
let w = document.documentElement.clientWidth;
if (w < 990) {
swapElements();
}
if (w >= 990){
preventDefaultSwap();
}
})
window.onresize = () => {
let w = document.documentElement.clientWidth;
if (w < 990) {
swapElements();
}
if(w >= 990) {
preventDefaultSwap();
}
}
swapElements = () => {
let swapElement = document.querySelector(".swap-element");
let swapElementSecond = document.querySelector(".swap-el");
let swapBlock = document.querySelector(".swap-block");
swapBlock.insertBefore(swapElementSecond, swapElement);
}
preventDefaultSwap = () => {
let swapElement = document.querySelector(".swap-element");
let swapElementSecond = document.querySelector(".swap-el");
let swapBlock = document.querySelector(".swap-block");
swapBlock.insertBefore(swapElement, swapElementSecond);
}
what we do?
creative
kitchen
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
art
installation
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
design
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?
Ответ
Scrollbar не является частью document.documentElement, он находится внутри окна, поэтому ширину надо тоже брать у окна: window.innerWidth
Комментариев нет:
Отправить комментарий