Comments (9)
Can you further clarify what you mean by background scrolling?
At the moment, in all styles, the .vex
class is a scrollable region to allow .vex-content
to be scrolled.
View demo on jsFiddle
This is intentional, because it allows the content of taller dialogs (or dialogs on smaller screens) to be scrolled in order to reach the bottom, where the buttons typically are located. Presumably, you're not referring to this type of scrolling, correct?
Vex does not however prevent scroll events from propagating up to the body.
As for jschr/bootstrap-modal. I'm not seeing anywhere in their source where they prevent the mousewheel event from propagating up to the body. Am I missing something? Do you know if they're preventing scrolling some other way (like setting overflow: hidden
on the body)?
from vex.
Thanks for the quick response @adamschwartz — your example looks like the desired behaviour.
Sorry I didn't post sample code; let me try to reproduce the issue on a jsFiddle, shortly. I have to back it out of a bunch of other code. Appreciate your patience.
The bootstrap folks also had an excellent issue opened about it but it seems lost in the melange of modal issues. I will try to find that too, just since it had covered the gamut.
from vex.
@adamschwartz Here is a sample jsFiddle exhibiting the issue.
In that particular example on my computer there are three scroll-bars. Particularly problematic is the interaction with tab-drag scrolling on mobile and scroll-wheel on mice, and they are focus dependent.
One of the discussions on Bootstrap is Bootstrap 3 responsive modal, but there were more, that I cannot find immediately, offhand. I will keep looking and post if I come across them.
Sorry if my post was not clear on the issues here and I hope that helps illuminate.
Thanks & cheers
from vex.
In your example, the user can still scroll both the dialog contents and the background contents independently, based on the position of the cursor, as seen in this video: Vex scrolling behavior.
In this way, vex currently allows the dialog to scroll very similar to the method Trello uses (as discussed in the PR you listed). The reason Trello isn't similarly affected is because the background isn't scrollable, as is the same for my original jsFiddle example.
So it seems my earlier assumption was correct, and you are referring to the mousewheel/scroll event propagating up to the body. There are two main ways to address this:
- When the cursor is above the dialog, use JS to track the scroll position of
.vex-content
within.vex
andreturn false
in the event handler when the user has scrolled to the bounds. When the cursor is above the overlay, alwaysreturn false
in the scroll event. - Use a similar method to that described in the Bootstrap 3 responsive modal which is to apply a class name,
.vex-open
, on the body in order to applyoverflow: hidden
and potentially other styles to prevent scrolling there.
From the Bootstrap 3 responsive modal PR:
Key Changes
...
- Reintroduces .modal-open on the body (so we can nuke the scroll there)
These options each have their strengths and weaknesses, and unfortunately, neither is guaranteed to work.
For example, 1. can fail when the user changes appendLocation
or when the height of the contents of .vex-content
may change during a scroll event. And 2. can fail if there are conflicting styles applied to the body
or if there is another scrollable region in the page which sits behind the dialog.
Combining 1. and 2. is also an option, but that may be not be worth the complexity added to vex.
For now, I'll recommend you try implementing option 2 yourself. That is the following:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<style>
body.vex-open {
overflow: hidden;
}
</style>
<script>
vex.defaultOptions.className = 'vex-theme-default';
vex.dialog
.alert('This is a tall dialog. (Scroll down)<div style="height: 500px"></div>This is a tall dialog.<div style="height: 500px"></div>This is a tall dialog.<div style="height: 500px"></div>This is a tall dialog.<div style="height: 500px"></div>This is a tall dialog. (Scroll up)')
.bind('vexOpen', function(){ $('body').addClass('vex-open'); })
.bind('vexClose', function(){ $('body').removeClass('vex-open'); })
;
</script>
</head>
<body>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
</body>
</html>
The key sections, of course, are the body styles:
body.vex-open {
overflow: hidden;
}
And the adding and removing of .vex-open
to the body
.
vex.dialog
.alert(/* ... */)
.bind('vexOpen', function(){ $('body').addClass('vex-open'); })
.bind('vexClose', function(){ $('body').removeClass('vex-open'); })
;
Here is a jsFiddle Demo of this example.
from vex.
Thanks so much @adamschwartz -- I think you have hit the nail on the head.
I cannot see any reason to leave this issue open - but of course I leave it to you, in case you wish to leave it open for discussion.
from vex.
Awesome... 🍻
from vex.
@adamschwartz Great reply and demo.
Is there any means to let the visitor to scroll the modal, when the user is hovering on the transparent overlay?
from vex.
@Ne-Ne this has been a common complaint about Vex, and something I'd like to address in a later release. Essentially, the issue is the stacking order. Let me explain.
The HTML vex.open
produces is the following:
<div class="vex vex-theme-default">
<div class="vex-overlay"></div>
<div class="vex-content"></div>
</div>
From bottom to top, the elements are stacked as follows: .vex
, .vex-overlay
, and .vex-content
.
.vex
has the overflow which allows scrolling, but since the .vex-overlay
element is above it and position: fixed
, the scroll wheel event isn't propagated up to .vex
. When your mouse is over .vex-content
however, the event does since it's just sitting inside .vex
with either position: relative
or position: static
.
The simple fix is to simply apply pointer-events: none
to .vex-overlay
. Now the mousewheel event isn't ever seen by .vex-overlay
and instead is fired directly on .vex
.
Eventually, I'd like to solve this issue with a better DOM structure and styling:
<div class="vex vex-theme-default">
<div class="vex-overlay"></div>
<div class="vex-content-scroll">
<div class="vex-content"></div>
</div>
</div>
With a stucture like this, the .vex
element no longer needs to be used to be the position: fixed
outer container and the scrolling container. In addition to solving the issue being discussed, this would also fix (or make it easier to fix) #23, #33, and #43. The next chance I get I'll take a pass at this. But if anybody in the community would like to help out with a PR here, I'd be happy to take a look.
from vex.
@adamschwartz thanks for taking the time to respond.
This is not a issue I found it seems it is quite common in plugins such as fancybox e.g. using ajax to get a specific page. I am glad you want to address it. I will update my code 👍
from vex.
Related Issues (20)
- HTML entities in unsafeMessage/unsafeContent
- is it possible to open vex over a canvas ?
- Help moving vex and using append location
- vex-open remains on body in chrome if dialog is closed in background with child browser window & print dialog is called (then print cancelled or proceed) HOT 1
- vex input field sanitizes spaces
- Multiple Buttons?
- problem with the modal position and size HOT 1
- how to use it in Vue? HOT 2
- readme spelling error
- file input inside vex.open() HOT 1
- Dynamic select using AngularJS with ng-options
- vex.close could cover submission
- demos in documentation don't work
- button click opens and closes dialog at the same time HOT 2
- Can Vex Modal lock? HOT 1
- Unsafe assignment to innerHTML
- Animations required for close
- Make buttons respond to Enter and Esc keys
- Refresh buttons of a dialog confirm HOT 1
- vex dialog buttons are not working as expected. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vex.