Desired Result and Problem
I am using fullPage.js for page scrolling for the sections on my website. The portfolio is not fitting in one "page section" - and I need it to be inside a scrollable section (without moving to another page section). I would like the user to be able to scroll within the "portfolio container" to scroll down to view other companies, but not scroll past the companies page.
What I have Tried
To achieve this I have inserted this into my added js code which is supposed to enable scrollbars for the section, and also "reset" the scrollbars thereafter.
var movedo_grve_fullpage_data = {"scrollOverflow": "true"};
var movedo_grve_fullpage_data = {"scrollOverflowReset": "true"};
Link To Page
However instead of scrolling within the "portfolio grid" it is scrolling into a new "page" and when scrolling back - a white block is left below the grid
Related
I'm trying to find the right jquery or js plugin to create an effect like this:
I have a long screen capture from a smartphone, is a huge image.
I want to put this image inside a scrolling div placed on top of a smartphone background image to simulate the screen.
I cannot find a way to manage the scrolling: I want to place this image in the middle of the page, and when the user scroll to the "smartphone" the windows scroll stop and my captured image placed inside the vertical scrolling div begin to scroll. At the end the page start to scroll again.
Is there something i can use?
I have a mobile web map application within an overflow: hidden body. There is a map legend which is partially hidden on the right side of the body and a menu which is partially hidden on the bottom of the body.
The idea is to click on the partially visible part of the control and have the control slide into view.
The bottom menu is higher than the body and should therefore be scrollable in the y direction.
The problem is that I can either prevent scrolling by preventing the default on the touchmove event handler or that I enable the scrolling which means that clicking on the menu allows to move the whole body of the application all over the shop.
The application can be accessed here https://geolytix.net/mobilemap
I use Google Chrome dev tools responsive view to test the touch scroll behaviour.
I disable the scrolling on the legend item but I cannot disable the scrolling on the large menu slider on the bottom.
What I am trying to prevent is that the user just pushes the menu off the screen like so:
One way would be to add to your css
html, body {position: fixed;}
to prevent the possibility of scrolling.
Now, to make your Menu scrollable you add to your css the following lines
#sliderPanel {height: 100%;overflow-y: scroll;}
You can now scroll the Menu on the y-Axis.
Is it possible to have both for one site while using the anchor tags?
I have already set up a website that does horizontal scrolling for each parent page. Some of these parent pages has child pages in sections that I will like to have scroll vertically to on that page with a sub menu on top.
I know I will have to use Javascript for this, but I was wondering what I need to do in the function to differentiate the horizontal scrolling for the parent pages with the vertical scrolling for the parent page's sub sections.
Have you looked at Scroll Converter?
https://github.com/koggdal/scroll-converter
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.
i am trying to do same as facebook do with messaging. First, scroll is place on the bottom of page instead of top (default behavior). When you scroll to top of div new messages are loaded but without change position of div content. Facebook only recalculate scroll position. So, when i load new messages on the top of scrollable div i need to stop scroll to automactily move scrollbar on the top of page.
I am using YUI JS library.... Any clue?
Did you try to make a
scroll(0,0);
when the page finished loading new message content.
You also have to make a
Y.one("scrollzone").syncUI();
to make YUI recalculate the height of the scrollable div.