cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

This Pen is a fork of Максим's Pen ZKrWGa.

Comments

  1. 1) Мы знаем, что некоторые браузеры учитывают ширину скролбара в медиа-запросах, а другие не учитывают.

    2) Можно расчитать ширину скролбара, измерив внутреннюю ширину двую блоков со скролом и без него.

    3) Теперь можно проверить как будет вести себя медиа-выражение для текущей ширины окна

    var windowWidth = $(window).width();
    var query = '(max-width:' + windowWidth + 'px)';
    console.log(window.matchMedia(query).matches);
    

    и для ширины окна с учётом скролбара

    var windowWidth = $(window).width();
    var scrollbarWidth = getScrollbarWidth();
    var query = '(max-width:' + (windowWidth + scrollbarWidth) + 'px)';
    console.log(window.matchMedia(query).matches);
    

    Фактически, нам интересна только вторая проверка, так как именно она даст ответ на вопрос о том, как ведёт себя браузер.

    4) Далее, основываясь на полученном знании, можно вычитать ширину этого скролбара.

    Возможно, стоит ограничиться только использованием matchMedia() и не полагаться на события ресайза. Это избавит от необходимости в этой магии. matchMedia() тоже может генерировать события и уведомлять клиентский код о том, что медиа-запрос на чал действовать или перестал действовать.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...