我正在 jsPsych（一個 JavaScript 庫）中撰寫代碼，并試圖在我的螢屏上顯示一個 。 的最大高度為 85vh，最大寬度為 85vw，盡管它沒有達到任何一個，因為它只有 60px。然而，即使 適合它的容器，它上面還有一個滾動條。
我不明白為什么會有滾動條。我使用的是overflow-y:auto，所以滾動條應該只在必要時出現。但是，我知道這是不必要的，因為在 周圍顯示一個 85vw x 85vh 的框表明 小于這些尺寸。
請查看我的代碼片段以獲得視覺效果。請注意，我使用的是 jsPsych 6.3，該版本無法在線獲得。因此，片段中的 JavaScript 代碼使用 jsPsych 7.0，但 CSS 代碼來自 jsPsych 6.3。我認為滾動條問題來自 CSS 6.3 代碼，因為當我用 CSS 7.0 替換 CSS 6.3 時它消失了。
有誰知道為什么我的 上有一個滾動條？
const jsPsych = initJsPsych();
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div >'
'<div > </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/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>uj5u.com熱心網友回復：
將您的更改overflow-y為隱藏。我在片段中看到它，但不是全屏。您的十字架容器沒有應用任何邊距或填充，因此它可能使用瀏覽器默認設定并導致它觸摸容器的頂部，它足以在足夠小的螢屏尺寸上創建滾動。
編輯：在十字架上，很抱歉在檢查員中選擇了錯誤的班級
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: hidden;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477751.html
標籤：javascript css 滚动条 溢出 心理
上一篇：標題高度未擴展到子元素的大小