- Full-Stack Vue.js 2 and Laravel 5
- Anthony Gore
- 178字
- 2021-07-02 19:57:23
Preventing body scroll
We have a problem, though. Our modal panel, despite being full screen, is still a child of thebodytag. This means we can stillscrollthe main window! We don't want users to interact with the main window in any way while the modal is open, so we must disable scrolling on thebody.
The trick is to add the CSSoverflowproperty to thebodytag and set it tohidden. This has the effect of clipping any overflow (that is, part of the page not currently in view), and the rest of the content will be made invisible.
We'll need to dynamically add and remove this CSS rule, as we obviously want to be able to scroll through the page when the modal is closed. So, let's create a class calledmodal-openthatwe can apply to thebodytag when the modal is open.
style.css:
body.modal-open { overflow: hidden;
position: fixed; }
We can usev-bind:classto add/remove this class, right? Unfortunately, no. Remember that Vue only has dominion over the element where it is mounted:
<body> <p id="app"> <!--This is where Vue has dominion and can modify the page freely--> </p> <!--Vue is unable to change this part of the page or any ancestors--> </body>
If we add a directive to thebodytag, it willnotbe seen by Vue.
- ClickHouse性能之巔:從架構(gòu)設(shè)計(jì)解讀性能之謎
- LabVIEW程序設(shè)計(jì)基礎(chǔ)與應(yīng)用
- Learning Selenium Testing Tools with Python
- Access 數(shù)據(jù)庫(kù)應(yīng)用教程
- Scala Design Patterns
- MySQL數(shù)據(jù)庫(kù)管理與開發(fā)實(shí)踐教程 (清華電腦學(xué)堂)
- Python全棧開發(fā):基礎(chǔ)入門
- Raspberry Pi Blueprints
- Visual FoxPro程序設(shè)計(jì)習(xí)題及實(shí)驗(yàn)指導(dǎo)
- 青少年P(guān)ython趣味編程
- Building Clouds with Windows Azure Pack
- MySQL數(shù)據(jù)庫(kù)教程(視頻指導(dǎo)版)
- Python編程零基礎(chǔ)入門
- Kudu:構(gòu)建高性能實(shí)時(shí)數(shù)據(jù)分析存儲(chǔ)系統(tǒng)
- UI設(shè)計(jì)參考手冊(cè)