Прокрутка только одного элемента flexbox, в то время как другой остается фиксированным с помощью flex-column - PullRequest
Новая
       162

Прокрутка только одного элемента flexbox, в то время как другой остается фиксированным с помощью flex-column

3 голосов
/ 06 августа 2020

У меня есть CodePen, демонстрирующий проблему на https://codepen.io/james-hudson3010/pen/dyMyVMg

Я близок к тому, что хочу ... самый верхний элемент с кнопкой «Переключить список» остается фиксированным, пока список прокручивается. Однако, когда я дохожу до конца списка, самый верхний элемент перемещается вверх. Самый верхний элемент должен оставаться фиксированным.

Проверяя высоту гибкого бокса, это ожидаемая высота. т.е. это высота тела - высота заголовка - высота нижнего колонтитула

Я бы подумал, что высота гибких элементов будет определяться на основе высоты гибкого бокса, но, очевидно, гибкие элементы могут расти неограниченно ...Это правда? почему?

JS: 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    source: String,
  },

  data: () => ({
    showList: true
  }),
  
  computed: {
    filtered() {
      var items = [];
      
      for ( var i = 0; i < 15; i++ ) {     
        let newItem = {
          'name': `Item ${i}`,
          'comment': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut'
        }
        
        items.push( newItem );
      }
      
      console.log( items.length, " ]] ", items );
      
      return items;
    },
    
    children() {
      var children = [];
      
      for ( var x = 0; x < 30; x++ ) {
        let newChild = {
          'name': `Item ${x}`
        }
        
        children.push( newChild );
      }
      
      console.log( children.length, " >> ", children );
      
      return children;
    }

  }
      
      
})

HTML: 

<div id="app">
  <v-app id="inspire">
    <v-app id="inspire" style="width: 100vw; height: 100vh;">
      <v-app-bar app color="primary">
        <v-btn text icon>
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-btn text icon>
          <v-icon>mdi-arrow-right</v-icon>
        </v-btn>
      </v-app-bar>

      <v-main style="height: 100%; width: 100%;">
        <div class="d-flex flex-column align-stretch" style="height: 100%; width: 100%;">

          <v-card class="pa-3 primary lighten-3" flat>
            <v-btn class="ma-4" @click="showList = !showList">Toggle List</b-btn>
          </v-card>

          <v-card flat color="transparent" height="100%" width="100%" v-if="showList">        
            <v-virtual-scroll :item-height="100" :items="filtered" bench="50">          
              <template v-slot="{ item }">
                <v-list-item>              
                  <v-list-item-content>
                    <v-list-item-title style="background-color: lightgreen;">{{ item.name }}</v-list-item-title>
                    <v-list-item-subtitle class="text-wrap" style="background-color: lightyellow;">
                      {{ item.comment }}
                    </v-list-item-subtitle>
                  </v-list-item-content>         
                </v-list-item>
              </template>         
            </v-virtual-scroll>        
          </v-card>
          <v-card width="100%" max-width="100%" height="100%" tile style="overflow: scroll;" v-else>                        
            <div v-for="item in 50">Hello {{ item }}<br></div>
          </v-card>
        </div>

      </v-main>

      <v-footer app color="primary">
        <v-img alt="Vue logo" height="40" width="40" max-height = "40" max-width = "40" contain />
      </v-footer>
    </v-app>
  </v-app>
</div>

1 Ответ

0 голосов
/ 06 августа 2020

Лот происходит в коде. Множество конфликтов и ненужных правил. Но я понимаю, что вы используете фреймворк.

Попробуйте добавить эти CSS правила: 

<v-card flat color="transparent" v-if="showList" style="height: 75%; flex: 1; overflow: scroll;">

исправленное перо

...