Tengo un filtro de búsqueda div offcanvas, como la ubicación, el tipo de propiedad, etc. en esta página: https://finder.createx.studio/real-estate-catalog-rent.html
En dispositivos de escritorio (=>lg), muestra "fuera del lienzo" de forma permanente, en dispositivos móviles (<lg) está oculto "fuera del lienzo" y se puede alternar con un botón. Todo eso funciona muy bien.
Cuando se carga la página, SI el elemento offcanvas es realmente offcanvas (es decir, <lg), quiero ejecutar un javascript para mostrarlo (después de otra verificación de lógica comercial, fuera del alcance de esta publicación).
Algo como esto:
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(); }Verificar si un elemento está fuera del lienzo parece equivalente a Verificar si el elemento está visible en DOM .
Así que podrías usar:
var isTheOffcanvasActuallyOffCanvasRightNow = myOffcanvas.offsetParent === null;Puede monitorear el cambio de medios usando 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>Vea la salida en modo de página completa y cambie el tamaño de la ventana del navegador.