Tengo una fila de elementos en un contenedor que varía en tamaño según el tamaño de la pantalla. Siempre quedarán elementos fuera de la cuadrícula y el último suele estar a mitad de camino.
Lo que debo hacer es ocultar por completo cualquier elemento que se muestre parcialmente. Desafortunadamente, no tengo un número fijo de elementos para ciertos tamaños de pantalla, es un caso en el que necesito mostrar tantos como pueda caber en mi contenedor. ¿Cómo se puede hacer esto?
Aquí hay una muestra de cómo se ve mi código actual: Observe cómo el último elemento solo cabe parcialmente en la pantalla. Me gustaría ocultarlo si no cabe completamente en mi contenedor.
¿Cómo se puede hacer esto?
const Item = () => { return ( <div className="item"/> ); }; const App = () => { return ( <div> <div className="container"> {Array.from({ length: 20 }).map((_, index) => ( <Item key={index} /> ))} </div> <p> Objective: all items need to be within the container. See how the last one only fits half way. I would like it to be completely hidden. </p> </div> ); } ReactDOM.render( <App />, document.getElementById('app') ); .item { width: 100px; height: 100px; background-color: red; border: 3px solid blue; } .container { padding: 10px; width: 60%; overflow: hidden; border: 3px solid black; /* CSS grid related properties */ display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-auto-rows: 120; grid-auto-flow: column; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>Editar: hay otra complicación en esta combinación, que es que debería tener todos los elementos ocultos con un botón que se desplaza hacia los elementos ocultos cada vez que se presiona. Básicamente, todavía necesito todos los elementos ocultos a un lado y no debajo de la fila visible.
Un método (ligeramente laborioso) sería adjuntar un pseudoelemento posterior al lado derecho del contenedor que cubre el artículo parcialmente incluido.
Aquí hay una versión JS simplificada. Recorre los elementos hasta que llega al primero que no está completamente contenido en el contenedor, calcula cuánto queda en el contenedor y establece el ancho del pseudo elemento a eso.
De esta manera, los elementos restantes no se ven afectados de ninguna manera, todavía están 'allí', pero significa que tan pronto como haya un desplazamiento horizontal o un cambio de tamaño de la ventana gráfica, el cálculo debe realizarse nuevamente.
function hide() { const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); const containerW = window.getComputedStyle(container).width.replace('px', ''); for ( let i = 0; i < items.length; i++) { const item = items[i]; const w = Number(window.getComputedStyle(item).width.replace('px','')); const rhs = (w + item.offsetLeft); if (rhs > containerW) { container.style.setProperty('--w', w - (rhs - containerW) + 'px'); break; } } } hide(); window.onresize = hide; .container { padding: 10px; width: 60%; overflow: hidden; border: 3px solid black; display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-auto-rows: 120; grid-auto-flow: column; position: relative; --w: 0; box-sizing: border-box; } .container::after { content: ''; width: var(--w); background: white; height: 100%; right: 0; top: 0; display: inline-block; z-index: 1; position: absolute; } .item { width: 100px; height: 100px; background-color: red; border: 3px solid blue; box-sizing: border-box; } <div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>Tenga en cuenta que el contenedor y los elementos se han asignado a box-siainv: border-box solo para facilitar el cálculo. Si se elimina, es necesario tener en cuenta la configuración de los bordes y los márgenes.