Element: [Bug Report] when el-image in a scrolling div. Left clik the image will lead to the page can't scroll

Created on 28 Nov 2019 · 10Comments · Source: ElemeFE/element

Element UI version

2.13.0

OS/Browsers version

chrome 78.0.3904.108

Vue version

2.6.10

Reproduction Link

https://codepen.io/zzxcncz/pen/LYYwOXo

Steps to reproduce

click the image ,then the page can't scroll

What is Expected?

click the image ,then the page can scroll

What is actually happening?

click the image ,then the page can scroll.
i fock the code from the element ui website.The demo of the component in the website can also lead the result. Just click the image ,and chage to other page.Then the other page can't scroll.
i found the reason is when i click the image in a scrolling div. it will add a css in .the css is over-flow: hidden.

Source

zzxCNCZ

👍2

Most helpful comment

i think add the following code will handle it

    clickHandler () {
      if (this.previewSrcList.length > 0) {
        // prevent body scroll
        prevOverflow = document.body.style.overflow
        document.body.style.overflow = 'hidden'
        this.showViewer = true
      }
    },

zzxCNCZ on 29 Nov 2019

👍3

All 10 comments

if i don't need preview the image, the click handler will also add a body style overflow = 'hidden'.
this will lead to i can't scroll the page.
the el-image's click handler code.

clickHandler() {
        // prevent body scroll
        prevOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        this.showViewer = true;
      },

zzxCNCZ on 29 Nov 2019

i think add the following code will handle it

    clickHandler () {
      if (this.previewSrcList.length > 0) {
        // prevent body scroll
        prevOverflow = document.body.style.overflow
        document.body.style.overflow = 'hidden'
        this.showViewer = true
      }
    },

zzxCNCZ on 29 Nov 2019

👍3

I get this problem too. it seems to make image-viewer run. but haven't check for i had not set preview-src-list.

看起来是为了打开 image-viewer 给body添加了overflow = 'hidden'。但是没有判断是否传了preview-src-list。没有的时候就是把滚动去掉了。这个问题还是挺影响使用的。望尽快修复。

zw8677174 on 3 Dec 2019

👍1

Also encountered this problem.

ZNspace on 5 Dec 2019

same problem

hooray on 5 Dec 2019

Same problem

viulu5824 on 10 Dec 2019

@luckyCao @island205 Please correct this regression. As soon as _any_ image is clicked, we now permanently and irreversibly get a body { overflow: hidden } attribute added breaking page scrolling.... reproduction link from @zzxCNCZ https://codepen.io/zzxcncz/pen/LYYwOXo