javascript - 为什么我的元素有一个 scrollbar 即使它适合它的容器?

我正在 jsPsych (一个 JavaScript 库)中编写代码,并试图在我的屏幕上显示一个 +。 + 的最大高度为 85vh,最大宽度为 85vw,尽管它没有达到任何一个,因为它只有 60px。然而,即使 + 适合它的容器,也有一个 scrollbar 。

我不明白为什么会有scrollbars。我正在使用 overflow-y:auto,所以 scrollbar 应该只在必要时出现。但是,我知道这是不必要的,因为在 + 周围显示一个 85vw x 85vh 的框表明 + 小于这些尺寸。

请查看我的代码片段以获得视觉效果。请注意,我使用的是 jsPsych 6.3,该版本无法在线获得。因此,片段中的 JavaScript 代码使用 jsPsych 7.0,但 CSS 代码来自 jsPsych 6.3。我认为 scrollbar 问题来自 CSS 6.3 代码,因为当我将 CSS 6.3 替换为 CSS 7.0 时它消失了。

有谁知道为什么我的 + 上有一个 scrollbar ?

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>

回答1

将您的 overflow-y 更改为隐藏。我在片段中看到它,但不是全屏。您的十字架容器没有应用任何边距或填充,因此它可能使用浏览器默认设置并导致它触摸容器的顶部,它足以在足够小的屏幕尺寸上创建滚动。

编辑:在十字架上,很抱歉在检查员中选择了错误的Class

.cross {
  font-size: 60px;
  max-width: 85vw;
  max-height: 85vh;
  overflow-y: hidden;
}

相似文章

javascript - 一次只能打开一个吗?

我做了这个很酷的可折叠功能,我认为它很好,但由于我对JavaScript不太熟悉,我试图一次只打开一个可折叠功能,但无济于事。就目前而言,每个可折叠的单击都会打开,直到您再次单击它以将其关闭。cons...

最新文章