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
Related
I have an autocomplete. When the dropdown appears, it may go out of view because it is close to the bottom.
The height of the div that contains this dropdown is increases. However, it does not automatically scroll to the end.
How to get it to scroll to the end?
I have an HTML page, and I have a <DIV> element in the page with a fixed width and height with a vertical scroll enabled for the <DIV>.
Now When I use a the vertical scroll bar for page (not the vertical scroll bar of the <DIV>) and scrolls down slowly , and when page scrolls down and reaches the <DIV> tag, and If I continue scrolling , then the scroll should take place inside the <DIV> till it reaches the bottom of the <DIV> and then after that proceed with the page scrolling.
I need to sample code with which I can achieve this behavior.
So I need an offsetBottom() jQuery function essentially. I have a fixed div that overlays the entire website, but I also have a div at the bottom of each page which contains the exact same content. My goal is to get the fixed overlay to disappear once the TOP of the div at the bottom of the page becomes visible, or is at the same height from the bottom as the overlay, even when the page is resized, then the overlay re-appears when the top of the div goes below the fixed div.
I am sorry I have no code example, I have been trying to use offsetTop() but the pages are of varying heights and it will only show/hide when the div reaches the very top of the web browser.
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
I have a div and inside my div I have a dojo dijit.layout.BorderContainer. Inside that border container I have 2 more more BorderContainers and finally each of those border containers has one more BorderContainer.
The base div is made movable with dojo.dnd.movable. This works fine and I can move my div about my screen properly. My problem arises in the most nested BorderContaienrs. Each of these contains many buttons and have the overflow:auto. When I grab the scroll bar to scroll down to see more of my buttons the scroll bar doesn't work. Instead when I grab the scroll bar and move it down/up it drags the entire div around the screen. I have checked the z-index and the scroll bar is most certainly above the div.
Here is the hierarchy
div/BorderContainer/BorderContainer/Bordercontainer(with scroll bar)