Code Monkey home page Code Monkey logo

Comments (9)

adamschwartz avatar adamschwartz commented on July 24, 2024

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.

brianmhunt avatar brianmhunt commented on July 24, 2024

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.

brianmhunt avatar brianmhunt commented on July 24, 2024

@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.

adamschwartz avatar adamschwartz commented on July 24, 2024

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:

  1. When the cursor is above the dialog, use JS to track the scroll position of .vex-content within .vex and return false in the event handler when the user has scrolled to the bounds. When the cursor is above the overlay, always return false in the scroll event.
  2. 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 apply overflow: 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.

brianmhunt avatar brianmhunt commented on July 24, 2024

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.

brianmhunt avatar brianmhunt commented on July 24, 2024

Awesome... 🍻

from vex.

Ne-Ne avatar Ne-Ne commented on July 24, 2024

@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.

adamschwartz avatar adamschwartz commented on July 24, 2024

@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.

Ne-Ne avatar Ne-Ne commented on July 24, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.