hjl19911127/vue-drawer-layout

Default scroll not working

Opened this issue · 6 comments

是否有办法不在content内部滚动。
浏览器整屏截图功能 eventListener('scroll') 都会在此滚动方式下失效

你的内容是希望在body内吗?

是的

能简单说下页面的dom结构吗?谢啦

  <div id="app" ref="app">
    <vue-drawer-layout>
      <div class="drawer-content" slot="drawer">
        <router-link>
        <router-link>
      </div>
      <div slot="content" class="main-content">
        <router-view/>
        <PageFooter :mobile="true"/>
      </div>
    </vue-drawer-layout>
  </div>
  <style>
    .main-content {
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
  </style>

原先有效代码大概是这样的结构。

其实问题已经解决了:
修改上述代码 使 overflow: scroll 作用在下级路由内部content上,同时绑定 @scroll 事件,取 ref.srcElement.scrollTop 可以获取到相对滚动距离。

但是总觉得阻止了html的默认滚动事件 也就是body设置了height: 100%,有一些 hack。
测试一下的话,可以使用 chrome 的自带的 Capture full size screenshot。html 滚动的情况下可以完整的截下整个html元素。内容滚动只能截取 viewport 当前显示的部分内容,不知道我这样表达明白了么。

只是一个建议和讨论结构修改的可行性,不是硬伤,还是感谢你贡献这么好用的插件

感谢反馈哈,当初是因为存在内容和抽屉同时移动的情况,考虑把内容使用slot内嵌在组件中,这块我考虑一下有没有可能把抽屉和内容分隔开,比如让调用方自行来滑动内容区域,再次感谢哈

Any update on this?