Bootstrap 5 Offcanvas - 检测是否在加载时显示 offcanvas 项目答案

【问题标题】：Bootstrap 5 Offcanvas - Detect if offcanvas item is displaing on loadBootstrap 5 Offcanvas - 检测是否在加载时显示 offcanvas 项目
【发布时间】：2021-12-17 20:20:15
【问题描述】：

我有一个搜索过滤器 div offcanvas，例如此页面上的位置、属性类型等：https://finder.createx.studio/real-estate-catalog-rent.html

在桌面设备 (=>lg) 上，它永久显示“offcanvas”，在移动设备 (

当页面加载时，如果 offcanvas 元素实际上是 offcanvas（即

我该怎么做？

类似这样的：

var myOffcanvas = document.getElementById('filters-sidebar');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
var myCustomBusinessLogicCheck = true;
var isTheOffcanvasActuallyOffCanvasRightNow = ?? //detect if offcanvas element is currently actually off-canvas

if (isTheOffcanvasActuallyOffCanvasRightNow  & myCustomBusinessLogicCheck) {
    bsOffcanvas.show();
}

我尝试了什么：

我尝试查找 *.bs.offcanvas 事件 - 但它们不会在页面首次加载时触发（并且 offcanvas 最初“隐藏”），仅在后续交互时触发。
查看了 bsOffcanvas 的 _isShown 属性 - 但它在桌面上返回“false”，所以我似乎无法使用它。
在 bsOffcanvas 上查看其他属性，但没有发现任何明显的东西
我也许可以跟踪一个带有 d-lg-none 的元素是否可见，但它感觉很糟糕。但是，如果我找不到更清洁的方法，这将是我的后备。

【问题讨论】：

检查元素是否不在画布上似乎等同于Check if element is visible in DOM。所以你可以使用var isTheOffcanvasActuallyOffCanvasRightNow = myOffcanvas.offsetParent === null;
轰隆隆，这行得通。创建一个响应，我会给你赏金。 :)

标签： javascript html bootstrap-5

【解决方案1】：

检查元素是否不在画布上似乎等同于Check if element is visible in DOM。

所以你可以使用：

var isTheOffcanvasActuallyOffCanvasRightNow = myOffcanvas.offsetParent === null;

【讨论】：

【解决方案2】：

您可以使用Window.matchMedia() 监控媒体变化：

var lgBreakpoint, content;

document.addEventListener('DOMContentLoaded', init);

function init() {
  content = document.getElementById('content');

  lgBreakpoint = window.matchMedia("(min-width: 992px)");
  handleChange(lgBreakpoint)
  lgBreakpoint.addListener(handleChange)
}

function handleChange(bp) {
  if (bp.matches) {
    content.innerText = "visible";
    content.style.backgroundColor = 'pink';
  } else {
    content.innerText = "collapsed";
    content.style.backgroundColor = 'lightgreen';
  }
}

@media (min-width: 992px) {
  .offcanvas-collapse {
    display: block;
    position: static;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    /*height: auto !important;*/
    transform: none !important;
    background-color: transparent;
  }
}

.offcanvas-start {
  top: 0;
  left: 0;
  width: 21rem !important;
  border-right: 0 solid transparent;
  transform: translateX(-100%);
}

.offcanvas {
  will-change: transform, box-shadow;
  transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s ease;
  box-shadow: none;
  visibility: visible !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container-fluid mt-5 pt-5 p-0 vh-100">
  <div class="row g-0 mt-n3">
    <!-- Filters sidebar (Offcanvas on mobile)-->
    <aside class="col-lg-4 col-xl-3 border-top-lg border-end-lg shadow-sm px-3 px-xl-4 px-xxl-5 pt-lg-2">
      <div class="offcanvas offcanvas-start offcanvas-collapse bg-info vh-100" id="filters-sidebar">
        Filters
      </div>
    </aside>
    <!-- Page content-->
    <div id=content class="col-lg-8 col-xl-9 position-relative overflow-hidden pb-5 pt-4 px-3 px-xl-4 px-xxl-5 vh-100">
      Main content
    </div>
  </div>
</div>

以全页模式查看输出并调整浏览器窗口大小。

【讨论】：