Estoy escribiendo código en jsPsych (una biblioteca de JavaScript) y estoy tratando de mostrar un + en mi pantalla. El + tiene una altura máxima de 85vh y un ancho máximo de 85vw, aunque no llega a ninguno porque solo tiene 60px. Sin embargo, aunque el + se ajusta a su contenedor, tiene una barra de desplazamiento.
No entiendo por qué hay barras de desplazamiento. Estoy usando overflow-y:auto, por lo que la barra de desplazamiento solo debería aparecer si es necesario. Sin embargo, sé que no es necesario porque mostrar un cuadro de 85vw x 85vh alrededor del + muestra que el + es menor que estas dimensiones.
Consulte mi fragmento de código para ver una imagen. Tenga en cuenta que estoy usando jsPsych 6.3, que no está disponible en línea. Por lo tanto, el código JavaScript en el fragmento usa jsPsych 7.0, pero el código CSS es de jsPsych 6.3. Creo que el problema de la barra de desplazamiento proviene del código CSS 6.3, porque desaparece cuando reemplazo CSS 6.3 con CSS 7.0.
¿Alguien sabe por qué hay una barra de desplazamiento en mi +?
const jsPsych = initJsPsych(); const trial = { type: jsPsychHtmlKeyboardResponse, stimulus: '<div class="box">' + '<div class="cross">+</div>' + '</div>' } jsPsych.run([trial]) @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); /* Container holding jsPsych content */ .jspsych-display-element { display: flex; flex-direction: column; overflow-y: auto; } .jspsych-display-element:focus { outline: none; } .jspsych-content-wrapper { display: flex; margin: auto; flex: 1 1 100%; width: 100%; } .jspsych-content { max-width: 95%; /* this is mainly an IE 10-11 fix */ text-align: center; margin: auto; /* this is for overflowing content */ } .jspsych-top { align-items: flex-start; } .jspsych-middle { align-items: center; } /* fonts and type */ .jspsych-display-element { font-family: 'Open Sans', 'Arial', sans-serif; font-size: 18px; line-height: 1.6em; } /* PROJECT STARTS HERE */ .box { border-style: solid; width: 85vw; height: 85vh; } .cross { font-size: 60px; max-width: 85vw; max-height: 85vh; overflow-y: auto; } <script src="https://unpkg.com/jspsych@7.0.0"></script> <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>Cambie su overflow-y a oculto. Lo veo en el fragmento pero no en pantalla completa. Su contenedor para su cruz no tiene márgenes ni relleno aplicado, por lo que probablemente esté usando los valores predeterminados del navegador y haga que toque la parte superior del contenedor en el que se encuentra lo suficiente como para crear un desplazamiento en un tamaño de pantalla lo suficientemente pequeño.
Editar: en la cruz, lo siento, se seleccionó la clase incorrecta en el inspector
.cross { font-size: 60px; max-width: 85vw; max-height: 85vh; overflow-y: hidden; }