Develop Reference

ionic 5 Prevent parent scroll when child scroll reach bottom

I have a situation where when child scroll reaches bottom parent scroll takes over and starts scrolling the whole screen.
Basicall I have normal icon page with a horizontal bar at top. When user clicks on top bar a div slid downs showing the list of items covering whole screen except top bar. Because this list is loner than the screen height I have allowed vertical scrolling in div. Now the problem is when the user is scrolling inside div and reaches the bottom of the list, the background page starts scrolling up.
What I want is, inside the div scrolling should not scroll the background/parent page when user reaches bottom of the list.
code sample (in browser you will need to move mouse a bit after reaching bottom)
https://stackblitz.com/edit/ionic-forum-5-jhl2pw
Thanks

Sliding images with Previous/Next buttons in javascript using animate()

I have a slideshow of 4 banners with Prev and Next button. It works fine with the Prev button but not the Next button.My problem is Once I press the Next button, the images move not properly.
This is the result I need.=> The next image on the right slides from right to left when clicking Next button.Now it slides but sometimes some images slides back to the right.
Please help.Thank you
<http://jsfiddle.net/pktono/sr5nv6k9>

So, there was couple of issues to fix:
1- animation time was overriding the css command. To fix that, you should use setTimeout function where your aftermath code should reside inside of it.
2- When you navigate to right, you set the previous banner left property to -650px. If you decide to navigate to the left at this moment, you have a wrong left property which ruin the rules. The same thing can happen when you are navigating to left and want to switch to right. To fix this, you should change left property of the current banner to the right value before animating it.
See the working example here

Scroll horizontal with fullPage.js, is it possible with the mouse wheel?

I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.
I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?

You can do it with jquery.mousewheel like:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel

Update 2016
Now fullPage.js provides the Scroll Horizontally extension for it.
What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.
Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?
Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).
And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.
Once the end of the slider is reached, you would need to add again the auto scrolling even.
It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.

Can I prevent Middle click opening a link to start auto scroll instead?

I am creating a component that shows a bunch of user photos inside a container with overflow:auto, each photo is surrounded by an <a> tag. There is no space around these images, so if the user ever users the middle click to auto scroll this list of photos it will ALWAYS open the link instead of starting auto scroll. That means auto scroll doesn't work.
Is there a trick that will make a middle click that occurs inside one of these image links to use the auto scroll rather than opening the link in a new tab?
Here is a fiddle that demonstrates the issue :
http://jsfiddle.net/uBrbb/
My original fiddle actually showed the scroll bar - which then allowed the middle click on the scroll bar itself - but in my actual case the scroll bars are hidden with a negative padding so that I can display a custom scroll bar (which I simulated using simple up/down buttons).

There are some complicated things you can do, but if possible, it would be better not to wrap the <img> elements in <a></a> to begin with, and instead handle the navigation by responding to your own click() event. In your click event, only perform navigation under the condition (e.which == 1) (left click), leaving middle click to the default behavior.

javascript effect

i notice there's this functionality on 9gag.com. on the homepage, the 'Y u no signup' button is on the right. but as you scroll down, the button is hooked onto the header banner. how is this done?? this can be also seen on this very page whereby the yellow panel(similar Questions) on the right freeze when u scroll this page down. in facebook timeline, as you scroll down there will be a absolute div which appear on the top which contain options for timeline, now, status, photo, place and event.
r they using javascript or is this something new in html5??

when the user scrolls down the computer checks for the amount scrolled.Let's say you scroll down with 50 px .The computer checks if the scroll distance is equal or bigger than 50.
If so then it will display that new Y u no Signup?!
and then if the scroll distance is smaller than 50 the top button simply isn't displayed anymore.

No this is simple HTML, or rather CSS. Use position: fixed;. See - here. You can check my site too for example.

Here is a near duplicate question: How does economist.com implement their sticky header? jQuery?
The answer is that you use javascript to detect scrolling, and change the css of the div you want to move to position:fixed after a certain amount of scrolling.