Инициировать события при достижении точек останова CSS - PullRequest
Новая
       11

Инициировать события при достижении точек останова CSS

0 голосов
/ 12 сентября 2018

У меня есть набор точек останова, и я хотел бы запускать событие каждый раз, когда оно проходит. В настоящее время я использую $(document).resize(function(){}), но это не совпадает с моими точками останова CSS, независимо от того, использую ли я window, document или любой другой селектор.

Есть ли способ просто определить, когда передается медиа-запрос? Вот мой текущий код: 

$( window ).resize(
    function() {
        if( $(window).width() < 500 ) {
            $(window).trigger("breakpoint-sm");
        }
        if( $(window).width() < 900 ) {
            $(window).trigger("breakpoint-md");
        }
    }
);

$(window).on(
    "breakpoint-md", function() {
        if($(window).width() < 900) {
            // this happens when below medium screen size
            alert( "breakpoint reached" );
        }
    }
);
@media screen and (max-width: 500px) {
    /* do mobile things */
}
@media screen and (max-width: 900px) {
    /* do mobile things */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если есть более простой способ узнать, пройдена ли точка останова вверх или вниз, я бы хотел это услышать.

Thankyou!

1 Ответ

0 голосов
/ 12 сентября 2018

У меня есть решение вашей точной проблемы, которое я использую сам.

По сути, вы не можете напрямую определять точки останова с помощью JavaScript, но вы можете обнаружить изменения в элементах, вызванные точками останова..css-js_ref-* div станут видимыми, когда будет достигнута их соответствующая точка останова. 

<div class="css-js_ref">
    <div class="css-js_ref-sm" data-bp="sm"></div>
    <div class="css-js_ref-md" data-bp="md"></div>
</div>

И затем вы можете использовать JS, чтобы определить, какой последний видимый элемент: 

function currentBreakpoint() { return $('.css-js_ref > *:visible').first().attr('data-bp') };

Возвращаетимя точки останова, которое вы вводите в разметку .css-js_ref, т.е. sm.

Рабочий пример: 

function currentBreakpoint() { return $('.css-js_ref > *:visible').first().attr('data-bp') };
var breakpointLength = $('.css-js_ref > *:visible').length;

$(window).on('resize', function () {

    var newBreakpointLength = $('.css-js_ref > *:visible').length;

    if (newBreakpointLength < breakpointLength) {
        breakpointLength = newBreakpointLength;
        $(window).trigger('breakpoint:up', [currentBreakpoint()]);

    }
    if (newBreakpointLength > breakpointLength) {
        breakpointLength = newBreakpointLength;
        $(window).trigger('breakpoint:down', [currentBreakpoint()]);
    }

});


$(window).on('breakpoint:down', function(event, bp){
    console.log(bp);
});
.css-js_ref * {
    display: none;
}

@media screen and (max-width: 500px) {
    .css-js_ref-sm {
        display: block;
        max-width: 500px;
    }
}
@media screen and (max-width: 900px) {
    .css-js_ref-md {
        display: block;
        max-width: 900px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="css-js_ref">
    <div class="css-js_ref-sm" data-bp="sm"></div>
    <div class="css-js_ref-md" data-bp="md"></div>
</div>

Использование: 

// bp is the breakpoint that was reached
$(window).on('breakpoint:down', function(event, bp){
    if(bp === 'md') {
        // do stuff on below medium sized devices
    }
});

$(window).on('breakpoint:up', function(event, bp){
    if(bp === 'md') {
        // do stuff on above medium sized devices
    }
});

Это решение немного трудоемкое, но чрезвычайно универсальное.Это также означает, что вам нужно определять свои контрольные точки только в одном месте, что отлично подходит для DRY соответствия.

...