search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
898 stars 97 forks source link

Scroll lock doesn't seem to work #42

Closed erikas-tranauskas closed 3 years ago

erikas-tranauskas commented 3 years ago

Hello, any idea why scroll lock doesn't work on my main page body tag? It doesn't seem to get the style="overflow: hidden" tag. I see no console errors or anything wrong, except this scroll bar.

hunterliu1003 commented 3 years ago

Hi @erikas-tranauskas ,

If prop lock-scroll was set to false, scroll lock would be disabled. Please check that you don’t set lock-scroll to false.

If setting lock-scroll to true still not work, could you please provide a reproduction link with codepen or jsfiddle so that I can help you

erikas-tranauskas commented 3 years ago

Thank you for your answer.

I tried this lock-scroll prop and it seems that it is working - I can't scroll using my mouse while modal is open, the only problem is that the scroll bar itself is still visible. If I pass the lock-scroll false parameter, then I can scroll with my mouse and the bar itself is visible also. I guess it's something with my CSS or HTML.

In which part of code the CSS parameter is passed to the main body tag? Maybe I could debug it.

hunterliu1003 commented 3 years ago

In which part of code the CSS parameter is passed to the main body tag? Maybe I could debug it.

The lockScroll feature was controlled by methods disableBodyScroll and enableBodyScroll (code is here bodyScrollLock.js), and bodyScrollLock is copied from body-scroll-lock.

erikas-tranauskas commented 3 years ago

I just saw that I don't even have such a file as bodyScrollLock.js and that my version is 0.19.1 only, maybe that's the case? I tried npm update vue-final-modal but I only got upgraded to 0.19.2.

hunterliu1003 commented 3 years ago

You can try to update the version to v0.21.3. Checkout if the issue was still exist.

hunterliu1003 commented 3 years ago

I refactor lock-scroll behavior in v0.21.x

erikas-tranauskas commented 3 years ago

npm update vue-final-modal only gives the 0.19.2 version. Could you update it to 0.21?

hunterliu1003 commented 3 years ago

The vue-final-modal@0.21.3 was published in https://www.npmjs.com/package/vue-final-modal/v/0.21.3

erikas-tranauskas commented 3 years ago

Hm, yes, I see. I still get only 0.19.2. I will try to reinstall it.

erikas-tranauskas commented 3 years ago

Updated, ok now I see the bodyScrollLock.js but still the scrollbar is visible. :( I will try to debug the js.

erikas-tranauskas commented 3 years ago

Ohh, nice it is working now. I updated the version but didn't restarted the watch build function. After full rebuild everything is fine. Thank you!