[英]Why does my element have a scrollbar even though it fits its container?
I am writing code in jsPsych (a JavaScript library) and am trying to display a + on my screen.我正在 jsPsych(一个 JavaScript 库)中编写代码,并试图在我的屏幕上显示一个 +。 The + has a maximum height of 85vh and a maximum width of 85vw, though it does not reach either because it is only 60px.
+ 的最大高度为 85vh,最大宽度为 85vw,尽管它没有达到任何一个,因为它只有 60px。 However, even though the + fits its container, there is a scrollbar on it.
然而,即使 + 适合它的容器,它上面还有一个滚动条。
I do not understand why there are scrollbars.我不明白为什么会有滚动条。 I am using overflow-y:auto, so the scrollbar should only appear if necessary.
我使用的是overflow-y:auto,所以滚动条应该只在必要时出现。 However, I know that it is unnecessary because displaying a box of 85vw x 85vh around the + shows that the + is less than these dimensions.
但是,我知道这是不必要的,因为在 + 周围显示一个 85vw x 85vh 的框表明 + 小于这些尺寸。
Please see my code snippet for a visual.请查看我的代码片段以获得视觉效果。 Note that I am using jsPsych 6.3, which is not available online.
请注意,我使用的是 jsPsych 6.3,该版本无法在线获得。 Therefore, the JavaScript code in the snippet uses jsPsych 7.0, but the CSS code is from jsPsych 6.3.
因此,片段中的 JavaScript 代码使用 jsPsych 7.0,但 CSS 代码来自 jsPsych 6.3。 I think the scrollbar problem comes from the CSS 6.3 code, because it disappears when I replace CSS 6.3 with CSS 7.0.
我认为滚动条问题来自 CSS 6.3 代码,因为当我用 CSS 7.0 替换 CSS 6.3 时它消失了。
Does anyone know why there is a scrollbar on my +?有谁知道为什么我的 + 上有一个滚动条?
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>
Change your overflow-y
to hidden.将您的
overflow-y
更改为隐藏。 I see it in the snippet but not at full screen.我在片段中看到它,但不是全屏。 Your container for your cross doesn't have any margins or padding applied so it's probably using browser defaults and causing it to touch the top of the container it's in just enough to create a scroll at a small enough screen size.
您的十字架容器没有应用任何边距或填充,因此它可能使用浏览器默认设置并导致它触摸容器的顶部,它足以在足够小的屏幕尺寸上创建滚动。
Edit: on the cross that is, sorry had the wrong class selected in the inspector编辑:在十字架上,很抱歉在检查员中选择了错误的班级
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.