Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

popup弹出时会自动scroll(0,0) #1893

Closed
txl1123 opened this issue Aug 30, 2017 · 11 comments
Closed

popup弹出时会自动scroll(0,0) #1893

txl1123 opened this issue Aug 30, 2017 · 11 comments
Assignees

Comments

@txl1123
Copy link

txl1123 commented Aug 30, 2017

vux@2.5.8, vux-loader@1.1.5, webpack@2.3.3, node@4.4
调出popup时,会自动scroll(0,0)
之前用vux@2.5.1并没有出现这种情况,于是对比调试发现,在popup的index.vue里发现一行代码导致这个问题的出现,
watch:show,代码line129
dom.addClass(document.body, 'modal-open')

@txl1123
Copy link
Author

txl1123 commented Aug 30, 2017

研究发现,dom.js一个代码写错了。大佬好粗心啊
addClass (el, token) { if (el.classList) { el.classList.add(token) } else if (!this.hasClass(el, token)) { el.classNae += '' + token } },
el.className写成了classNae,赶紧更新版本吧
但是实际在执行 el.classList.add(token)的时候,就已经srcoll0了,并不是报错影响的

@airyland
Copy link
Owner

你是指 window scroll(0, 0) 还是 popup 里的容器滚动到顶部。上代码吧。

@txl1123
Copy link
Author

txl1123 commented Aug 31, 2017

是window.scroll(0,0)了,其实我测试了几次,是popup组件dom.addClass(document.body, 'modal-open'),在dom.js执行el.classList.add(token),添加的modal-open这个样式,引起的,我试过添加其他样式,并不影响,可能是样式的position:fixed引起的。
没有具体的代码,代码都是按照你的demo写的,没有太多改动,调用DateTime时并不会出现,因为DateTime,不是用popup。

@airyland
Copy link
Owner

demo 重现不了你所说的问题,还是给个可重现的吧。

@wg5945
Copy link
Collaborator

wg5945 commented Aug 31, 2017

暂时没有比较好的解决方案,容我三思 - -

demo采用的是100%布局,所以没有这个问题

可以的话先加上个全局样式,就能避免了

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

@airyland
Copy link
Owner

airyland commented Sep 1, 2017

下个版本不再自动这样处理,引入插件,变成可配置。仅在 $layout 为 VIEW_BOX 时才执行这个逻辑。

import { ConfigPlugin } from 'vux'

Vue.use(ConfigPlugin, {
  $layout: 'VIEW_BOX' // global config for VUX, since v2.6.0
})

@zhump
Copy link
Contributor

zhump commented Sep 1, 2017

@wg5945

html, body {
  height: 100%;
}
popup  的.vux-modal-open overflow,fixed,就不会引起 置顶了。

但是会引起一个问题。

window.addEventListener("scroll",xxx)
window 无法监控 onscroll 事件,导致页面功能失效,sticky组件也会失效。

@airyland
popup 类的组件能否加个 弹框打开之前的方法,我可以手动把html,body的height设为100%,关闭的时候,我再把他还原,这样可能就不会影响window 的 onscroll。

我目前采用 document.addEventListener("touchmove",xxx)去暂时代替一下。
或者是

.no-overflow {
    position: relative!important;
    overflow: auto!important;
}

给vux-modal-open no-overflow 设置一下。

目前还没遇到啥问题。。。

@Zenfeder
Copy link

Zenfeder commented Jan 12, 2018

@airyland vux 版本2.3.4
我用了
Vue.use(ConfigPlugin, {
$layout: 'VIEW_BOX' // global config for VUX, since v2.6.0
})
结果x-dialog组件会跟着页面滚动,见下图:
image

@airyland
Copy link
Owner

@Zenfeder 确认你是 100% 布局再这样设置。

@Zenfeder
Copy link

Zenfeder commented Jan 12, 2018

@airyland oh,这操作可以,感谢大佬。but:
@zhump 说的,这样会导致window.addEventListener("scroll",xxx)失效额,我页面有上拉加载更多的操作

@airyland
Copy link
Owner

@Zenfeder 改成监听 100% 布局的 div,如果你用 view-box 组件,监听 #vux_view_box_body

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants