hjl19911127/vue-drawer-layout

该组件导致无法页面滚动?

Closed this issue · 10 comments

在未使用您的框架下

<template>
  <div id="drawer">
    <navbar @childEvent="handleToggleDrawer"></navbar>
    <slot></slot>
    <toolbar></toolbar>
  </div>
</template>

该可以将长页面拉到最底层

而在使用您的框架时

<vue-drawer-layout ref="drawerLayout">
    <div class="drawer" slot="drawer">
      <navbar-list></navbar-list>
    </div>
    <div class="content" slot="content">
      <navbar @childEvent="handleToggleDrawer"></navbar>
      <slot></slot>
      <toolbar></toolbar>
    </div>
</vue-drawer-layout>

在content元素过长时候无法进行页面滚动,而我并没有办法解决这个问题

您需要借助样式来滚动

.content{
    overflow: auto;
}

@hjl19911127 我尝试过这样,但是并没有什么卵用

该容器有高度吗?

@hjl19911127 我觉得是不是嵌套了子组件的问题?

image
如图,容器需要有高度和overflow,才有滚动,这个跟组件是没关系的,是css的问题

image
如图,您需要在scrollarea中加这个样式

@himself65 建议关注下css滚动条件

@hjl19911127 已经解决了,是我才疏学浅了:P

共同进步,加油! @himself65