Страницы

Поиск по вопросам

воскресенье, 10 марта 2019 г.

Почему insertBefore меняет элементы местами до поставленных условий

Очень долго ломал голову, но никак не смог решить проблему.
Как видно, есть 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?

print

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

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

Отправить комментарий