我的 vue 應用程式中有此代碼
<form class="d-flex me-auto" id="searchBar">
<div class="input-group">
<input class="form-control" type="text" placeholder="Cerca professionista" @keyup="search" aria-label="Search" v-model="searchInput">
<button class="btn btn-outline-success" @click.prevent="search">
<i class="fa-solid fa-search"></i>
</button>
</div>
</form>
<div class="list-group" v-if="searchResults.length > 0" id="searchResultsList">
<a href="#" class="list-group-item list-group-item-action" v-for="(result, index) in searchResults" :key="index" id="searchResult" @click.prevent="showUserProfile(result.username)">
<div class="d-flex w-100 justify-content-between">
<p class="ps-2 me-auto mb-1">{{ result.name }} {{ result.surname }}</p>
<!-- <img :src="result.propicUrl" id="searchResultThumbnail"> -->
</div>
<small class="ps-2 me-auto">{{ result.category }}</small>
</a>
</div>
我將有一個包含搜索結果的串列，因為有很多結果，我怎樣才能使它可滾動？目前我已經添加了這個 css 規則但沒有作業
<style lang="scss">
#menu {
height: 75px;
.navbar-brand {
padding-top: 0;
#logo {
width: 60px;
height: 60px;
}
}
#searchBar {
width: 420px;
}
#searchResultsList {
position: absolute;
top: 3.8em;
left: 5.4em;
width: 420px;
overflow-y: scroll;
#searchResult {
overflow-y: scroll;
#searchResultThumbnail {
height: 40px;
width: 40px;
border-radius: 50%;
}
}
}
}
</style>
uj5u.com熱心網友回復：
您需要設定height或設定max-height一個導致具體大小的值（例如：、、、40vw）200px才能20pt產生overflow-y: auto | scroll任何效果。
如果不設定(max-)height，元素將增長以匹配其子元素的高度，并且永遠不會顯示活動滾動條。
旁注：考慮到元素 has position: absolute，height: 100%可能會將高度請求委托給最近的定位祖先，但同樣，您確實需要一個具有具體高度的定位祖先overflow-y: auto | scroll才能作業。
通用示例：
顯示代碼片段
Vue.createApp().mount('#app')#app {
max-height: 100px;
overflow-y: auto;
border: 1px solid red;
}<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
<div v-for="n in 20">test</div>
</div>操場：
顯示代碼片段
const { createApp, reactive, toRefs } = Vue;
createApp({
setup: () => ({
...toRefs(reactive({
setHeight: false,
setMaxHeight: true,
listLength: 20
}))
})
}).mount('#app')#app {
display: flex;
}
#app>* {
flex: 0 0 50%;
}
.scroller {
overflow-y: auto;
border: 1px solid red;
}
.controls {
padding: 0 1rem;
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
<div class="scroller" :style="{ height: setHeight ? '100px' : '', maxHeight: setMaxHeight ? '100px': ''}">
<div v-for="n in listLength">test</div>
</div>
<div class="controls">
<div>
Items: <input type="number" v-model="listLength">
</div>
<label>
<input v-model="setHeight" type="checkbox">
Set height
</label>
<label>
<input v-model="setMaxHeight" type="checkbox">
Set max height
</label>
</div>
</div>height設定和之間的區別在于max-height，height即使沒有足夠的內容來填充元素，元素也會具有指定的高度，而使用max-height，當您沒有足夠的內容時，元素將一直縮小到0(除非其他東西給它一個軟min-height：例如：一個彈性容器）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484777.html