Scroll to close doesn't work like in Medium #194
Comments
The comment you have linked is a good place to start: you can always modify it to suit your needs (in this case, an exact Medium replica in terms of UX). Fluidbox is not meant to be a verbatim copy of Medium's lightbox component, but more of a study of it. It is extremely minimal and stripped down, but powerful in the sense that it emits a lot of events that you can use as hooks for calling custom methods. So, this is not a bug per se that has to be fixed ;) |
I see :) thanks for your detailed answer! |
The plugin does not allow you to register custom events, but you can feel free to create a fork and merge in the master branch whenever it is updated. Speaking of your original question, a slightly modification to the code snippet you linked should work (I have not tested it tho): // Initialise Fluidbox
$('a').fluidbox();
// Listen to scroll
// Note: You might want to throttle the callback, e.g.:
// - Use jQuery throttle/debounce plugin
// - Use underscore/lodash _.throttle
var scrollPosition;
$(window).scroll(function() {
var currentScrollPosition = $(window).scrollTop();
// If has scrolled beyond plus/minus 60 pixels
if (Math.abs(currentScrollPosition - scrollPosition) > 60)
$('a').fluidbox('close');
// Update global scroll position store
scrollPosition = currentScrollPosition;
}); |
oh thats genius! thanks. |
Hey,
I tried to open the demo in chrome + edge but whenever I scroll when there's a picture open, it doesn't close it.
Notice how in Medium's site you can scroll up or down, and it will close it after like 500ms, but it doesn't work in Fluidbox.
I've seen this comment but its not identical to how Medium fluidbox behaves. See, in Medium you can scroll up to 60 pixels down/up but nothing happens. only when you cross that 60 pixels, it fires the close event.
Will this be fixed?
Other than that its really awesome!!
I appreciate your work!
Elron
The text was updated successfully, but these errors were encountered: