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% 可能会将高度请求委托给最近的但是，同样，您确实需要一个带有 混凝土高度 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：例如：一个 flex 容器）。

CSS - 如何使动态 bootstrap 列表可滚动

CSS - How to make a dynamic bootstrap list scrollable

twitter-bootstrap

vue.js