Quiero mostrar un div solo si la página tiene barras de desplazamiento y ocultarlo si no. Quiero hacer esto en CSS puro o JavaScript (si es imposible en CSS).
Encontré una pregunta en Stack Exchange, pero está infestada con esa basura de cáncer jQuery, por lo que es inútil. Estoy hablando de JavaScript puro, no de jCancer.
Aquí hay una solución JS pura, usando esta función:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight; Editar (descripción): la función devuelve true si el elemento es desplazable, false de lo contrario.
Ejemplo:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight; // make scrollable divs have a red border document.querySelectorAll("div").forEach(div => { if (isScrollable(div)) div.style.borderColor = "red"; }); div { border: 1px solid grey; width: 200px; overflow: auto; margin-bottom: 1rem; } div#div1 { height: 100px; } div#div2 { height: 170px; } <div id="div1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh. </div> <div id="div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. </div>