CSS -如何使动态引导列表可滚动

Question

我的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>

Answer 1

您需要将height或max-height设置为一个导致具体大小(例如：40vw、200px、20pt)的值，以使overflow-y: auto | scroll产生任何效果。

如果不设置(max-)height，元素将增长到与其子元素的高度相匹配，并且永远不会显示活动滚动条。

附带注意:考虑到元素有position: absolute，height: 100%可能会将高度请求委托给最近的positioned ancestor，但同样，需要一个带有具体高度的定位祖先才能工作。

一般例子：

​

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：e.g:一个flex容器)。