0
235
ViewsJavascript detecta desbordamiento con relleno consciente
Estoy creando una barra de navegación que puede transformarse entre la versión de escritorio y la versión móvil según el ancho de la pantalla.
A diferencia de la barra de navegación de Bootstrap que utiliza @media (min-width: ${minWidth}px) para cambiar,
Estoy usando un JavaScript para la detección de desbordamiento , comparando $0.clientWidth y $0.scrollWidth .
El problema es que paddingRight no resta $0.clientWidth , por lo que la detección no es precisa.
Quiero obtener el ancho real del cliente sin relleno como se muestra en el inspector de páginas de Chrome.
Como lo marca el rectángulo verde en esta ilustración: 
Nota:
- No puedo aplicar un truco agregando
::afterde llenar el lado derecho, porque el contenedor es una cuadrícula, lo que causa el feo espacio en la columna. - No puedo aplicar marginRight al menú porque el margen llenará el gridArea.
Aquí la maqueta de mi Navbar.
Concéntrese en el archivo .js: Ver y editar mi sandbox
3 answers
Answer question0
Si está utilizando la lista, quiero decir si su estructura es como
<ul> <li> <a href="#"> </a> </li> </ul> Luego, proporcione el padding a la etiqueta de anclaje y luego obtenga el ancho de la etiqueta li , su problema se resolverá
0
básicamente, desea el ancho real del elemento sin relleno, puede lograrlo usando javascript
<script> function getWidth() { var elemWidth = document.getElementById("navbar").offsetWidth; alert(elemWidth); } </script> en resumen, el truco es offsetWidth para obtener el ancho interno de los elementos.
0
Actualicé tu código por favor revisa
javascript
console.log('loaded') const navbar = document.querySelector("#navbar"); const indicator = document.querySelector("#indicator"); const menu = document.querySelector('.menu'); new ResizeObserver(() => { const overflowed = navbar.scrollWidth > navbar.clientWidth; if (overflowed) { indicator.classList.add('mobile'); indicator.classList.remove('desktop'); indicator.value = "overflowed => switch to mobile version"; menu.classList.add('mobile'); } else { indicator.classList.add('desktop'); indicator.classList.remove('mobile'); indicator.value = "not overflowed => desktop version"; menu.classList.remove('mobile'); } }) .observe(navbar, { box: 'border-box' });CSS
body { margin: 20px; } .navbar { padding-inline: 80px; padding-block: 10px; background: #186EFB; border: solid 3px darkblue; min-height: 50px; display: grid; grid-template-columns: min-content 1fr; grid-template-rows: 1fr; grid-template-areas: "logo menu"; column-gap: 10px; justify-items: center; align-items: center; } .logo { grid-area: logo; display: inline-block; background: red; border: solid 3px darkred; width: 30px; height: 30px; } .menu { grid-area: menu; align-self: stretch; justify-self: stretch; display: block; background: #14924C; border: solid 3px darkgreen; min-width: 300px; height: 50px; } #indicator.desktop { background: lightgreen; } #indicator.mobile { background: pink; } .menu.mobile{ max-width: 300px; min-width: auto; }