到达CSS断点时触发事件 [英] Trigger events when CSS breakpoints are reached
问题描述
我有一组断点，每次传递时我都要发一个事件。目前，我正在使用 $（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）{//这发生了当低于中等屏幕尺寸警报（达到断点）;}}）;
@media屏幕和（最大宽度：500px）{/ *做移动设备* /} @媒体屏幕和（最大宽度：900px）{/ *做移动设备* /}
< script src =https://ajax.googleapis.co米/ AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本>
如果有一种更简单的方法可以知道断点是向上还是向下传递，我愿意听到它。
谢谢你！
我已经找到了解决你自己使用的确切问题的方法。
基本上，您无法使用JavaScript直接检测断点，但可以检测断点导致的元素更改。当达到各自的断点时， .css-js_ref - * div将变为可见。
< div class =css-js_ref>
< div class =css-js_ref-smdata-bp =sm>< / div>
< div class =css-js_ref-mddata-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'，[cu rrentBreakpoint（）]）;}}）; $（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;最大宽度：500px; @ media screen和（max-width：900px）{。css-js_ref-md {display：block;最大宽度：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-smdata-bp =sm>< / div> < div class =css-js_ref-mddata-bp =md>< / div>< / div>
用法：
// bp是达到的断点
$（窗口）.on（'breakpoint：down'，function（event，bp）{
if（bp ==='md'）{
//在中等大小的设备上做东西
}
}）;
$（窗口）.on（'breakpoint：up'，function（event，bp）{
if（bp ==='md'）{
// do在中型设备上的东西
}
}）;
这个解决方案有点工作但功能多样。这也意味着您只需要在一个地方定义断点，这对于 DRY 非常有用。合规。
I have a set of breakpoints and I'd like to fire an event every time one is passed. Currently, I'm using $(document).resize(function(){}) but this doesn't match up with my CSS breakpoints whether I use window, document or any other selector.
Is there any way of just detecting when a media query is passed? Here's my current code:
$( 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>
If there's an easier way to know if the breakpoint has been passed upwards or downwards, I'd be willing to hear it.
Thankyou!
I've got a solution to your exact problem which I use myself.
Basically, you can't directly detect breakpoints using JavaScript but you can detect changes to elements caused by breakpoints. The .css-js_ref-* divs will become visible when their respective breakpoint is reached.
<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>
And you can then use JS to detect what the last visible element is:
function currentBreakpoint() { return $('.css-js_ref > *:visible').first().attr('data-bp') };
This returns the breakpoint name you put into the .css-js_ref markup, i.e. sm.
Working Example:
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>
Usage:
// 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
}
});
This solution is a bit of work but extremely versatile. It also means you only have to define your breakpoints in one place which is great for DRY compliance.
这篇关于到达CSS断点时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
