Default scroll not working
Opened this issue · 6 comments
hydraZty commented
是否有办法不在content内部滚动。
浏览器整屏截图功能 eventListener('scroll') 都会在此滚动方式下失效
hjl19911127 commented
你的内容是希望在body内吗?
hydraZty commented
是的
hjl19911127 commented
能简单说下页面的dom结构吗?谢啦
hydraZty commented
<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 当前显示的部分内容,不知道我这样表达明白了么。
只是一个建议和讨论结构修改的可行性,不是硬伤,还是感谢你贡献这么好用的插件
hjl19911127 commented
感谢反馈哈,当初是因为存在内容和抽屉同时移动的情况,考虑把内容使用slot内嵌在组件中,这块我考虑一下有没有可能把抽屉和内容分隔开,比如让调用方自行来滑动内容区域,再次感谢哈
PeterSR commented
Any update on this?