在屏幕大小更改时触发 javascript

Posted

技术标签:

【中文标题】在屏幕大小更改时触发 javascript【英文标题】:Trigger javascript on screen size change 【发布时间】:2021-06-11 09:36:37 【问题描述】:

我有一个 Bootstrap 导航选项卡,它根据屏幕大小显示/隐藏各种选项卡窗格(通过 Bootstrap 断点完成)。

我面临的问题是,当用户在 #hide-show 选项卡窗格处于活动状态的 sm 屏幕上,然后她将浏览器窗口的大小调整为 lg 屏幕(现在隐藏了 #hide-show)时, #hide-show 窗格仍然在后台保持活动状态。

有没有办法根据屏幕大小或 #hide-show 选项卡窗格的显示类型属性来切换活动窗格?

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item d-lg-none">
    <a class="nav-link" id="hide-show-tab" data-toggle="tab" href="#hide-show" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="d-block d-lg-none tab-pane fade" id="hide-show" role="tabpanel" aria-labelledby="hide-show-tab">...</div>
</div>

【问题讨论】:

developer.mozilla.org/en-US/docs/Web/API/Window/resize_event 【参考方案1】:

正如罗伯托指出的,窗口有a native event for this。

要使用它,您可以使用EventTarget#addEventListener

window.addEventListener('resize', event => 
  console.log(event);
);

我不太清楚切换活动窗格是什么意思,但您可以在某些断点有条件地删除此类。

window.addEventListener('resize', () => 
  // Toggle on mobile
  if (window.innerWidth <= 696) 
    Array.from(document.querySelectorAll('.active')).forEach(element => 
      element.classList.remove('active');
    );
  
);

如果它只是以可预测的方式影响风格,我建议诉诸 CSS media queries。

@media (max-width: 696px) 
  .active 
    /* Mobile style changes here */
  

【讨论】:

以上是关于在屏幕大小更改时触发 javascript的主要内容,如果未能解决你的问题,请参考以下文章

使用页面宽度调整大小更改图像

屏幕重新加载时 CollectionView 单元格更改大小

在调整屏幕大小时,当移动到溢出按钮时,工具栏中的SplitButton不会触发点击处理程序。

在屏幕更改大小时管理列表分隔符(媒体查询)

如何使用JavaScript和CSS Grid使基于屏幕/视口大小的RadWindow响应

根据屏幕大小更改 CSS