переполнение-y: прокрутка или авто не работает должным образом. Это не прокрутка

#javascript #html #css #vue.js #less

Вопрос:

Я использую vue.js с меньшим. Я пытаюсь прокрутить div с переполнением, но он не работает, он остается как переполнение:скрытый

Скриншот проблемы.

Это и есть код

 <template>
  <div class="chatarea" v-if="currentRoom">
    <ChatInput />
    <div class="chatbox">
      <ChatBit
        :message="chats.message"
        :sender="chats.username"
        v-for="(chats, index) in messages[currentRoom]"
        :key="index"
      />
    </div>
  </div>
</template>

Это css

 <style lang="less" scoped>
.chatarea {
  width: calc(100% - 300px);
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background-color: #3b3d47 - #222222;
  .chatbox {
    height: calc(100% - 50px);
    // height: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: scroll;
  }
}
</style>

Спасибо за любую помощь 🙂

1. Попробуйте задать фиксированную высоту для вашего класса chatarea. Вроде height: 100vh или что-то в этом роде.

2. height: 100%; высота родителей не будет работать, если у родителя нет фиксированной высоты. Браузер тоже не знает, что применять на 100%. Кроме того, вы получаете полосу прокрутки только в том случае, если элемент действительно переполняется. Если высота элемента не меньше, чем у содержимого, переполнение не появится и, как таковое, полоса прокрутки не окажет никакого влияния.

3. @tacoshy Спасибо, но я не могу понять это ясно. Что мне тогда делать?

4. Я рекомендую вам добавить фрагмент кода вместо скриншота

Ответ №1:

Всякий раз, когда я использую атрибут css overflow-y , я бы обычно использовал значение auto вместо scroll .

Вот ваш css, который я изменил, и теперь он должен работать для вас. ВуэЙС здесь не проблема.

 <style lang="less" scoped>
.chatarea {
  width: calc(100% - 300px);
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background-color: #3b3d47 - #222222;
  .chatbox {
    height: calc(100% - 50px);
    // height: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: auto;
  }
}
</style>

1. Спасибо, но это не работает auto , просто скрывает полосу прокрутки навсегда..

2. @AnupamKrishna вам не нужна полоса прокрутки для прокрутки вверх и вниз.

3. Он не прокручивается вверх или вниз. Он ведет себя как переполнение: скрыто

4. хм, это странно. на моем MacBook, когда я прокручиваю вверх и вниз, он работает, когда я прокручиваю вверх и вниз.

Ответ №2:

Попробуйте присвоить атрибут max-height

 .chatarea {
  width: calc(100% - 300px); 
  height: 100%; // suggest you to 100vh
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background-color: #3b3d47 - #222222;
  .chatbox {
    max-height: calc(100% - 50px);
    // height: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: scroll;
  }
}

Ответ №3:

Спасибо всем, кто помогал. Проблема заключалась в justify-content:flex-end том, что я удалил линию, и все начало работать так, как задумывалось.

Ответ №4:

в этом случае вы прокомментировали строку, в которой задали высоту для элемента, который вы хотите прокрутить, просто замените этот блок кода : height: 600px; // You had commented this line

и лучше установить overflow значение auto , поэтому, если чат не прокручивается (высота чатов меньше высоты контейнера), полоса прокрутки не отображается, и это не ухудшает ваш пользовательский интерфейс.