Alright so I'm really stumped by this one. How can I lock the page's scroll position to a specific value? I can't use overflow: hidden; on the body, because that prevents scroll events from firing entirely. I can't use scrollTo(0,0) every time the scroll event fires, because that causes a terrible stuttering effect.
What can I do? How can I lock the scroll at a specific spot? I've been scouring the internet and I've found nothing. A friend and I have been working on this for like an hour and can't think of anything at all. Any help is appreciated!
EDIT: I'd like to achieve an effect identical to what is shown on this page: https://www.apple.com/ie/macbook-pro-16/
Related
Would someone be able to help me out recoding some of the aos.js script? Long story short, I'm trying to get aos to work within an iFrame. I'm using iframeResizer.js and I'm able send the height of the viewport from the parent page to the iFrame. I'm also able to send the scroll offset. The next bit I need to figure out is how to use this data within aos.js. So far I've managed to change anything within aos.js that was previously using the height and scroll position of the window to instead use the height and scroll position of the parent page, which looks promising. Where previously all aos animations were playing as soon as the page loaded, now they sit waiting for a scroll event to trigger. The thing is though, there's some code within aos.js that I just can't get my head around in order to rewrite it to trigger the scroll off a callback from iframeResizer.js. I've been trying to get these scroll based animations running within an iFrame for what seems like an eternity so any help would be greatly appreciated.
So, from what I can see, there's a line in aos.js with 3 event listeners the last of which is a scroll event. It looks like this though with some strange parameters in brackets that I've never seen before.
window.addEventListener("scroll", (0, u.default)(function() {}
I've tried writing my own function but I just don't get what what the (0, u.default) part is or how to use it. The whole aos.js script is way above my level of JavaScript unfortunately. If any one can advise me how I could trigger that same event listener I would very much appreciate it!
Another option I've been trying is to fake the scroll event...as in, every time the scroll position changes and gets sent from the parent into my iframe could I fake a scroll event...but I haven't had any luck. Is that even possible I wonder?
I think that's enough information for now as but if anyone is willing to help and would like more please just shout.
Thanks
When I try to scroll down this page, it jumps to top? Already tried by changing the overflow: hidden; to Scroll or auto but problem is still there.
This problem persist in every browser. Please, provide an effective solution to this.
This is not a browser problem.
I'm trying to find the best technique for showing a navigation/menu for a mobile site I'm working on. So far all my solutions have flaws, and I was wondering if anyone could point me in the right direction. (You may have to reduce browser window size to make the examples work as intended)
First off, take a look at this "basic" example: http://audunaas.no/menu/problem.html
You'll notice the content is still scrollable while the navigation is open. This is confusing and annoying.
My first attempt at a fix was to set the body to overflow:hidden and position:fixed whenever the navigation is open. Example here: (Had to remove link because maximum 2 links in post)
This, however, causes the body to snap back to the top and "forget" its scroll position. This means you are taken back to the top of the page whenever you open the navigation. Not good.
Lastly, my best solution so far is one where i put all the page content inside a #scroll-area-div with a fixed position taking up most of the screen, and body scroll set to hidden. Example here: http://audunaas.no/menu/
This solves most of the problems in the page itself, but breaks the "memory" of the back button. This means whenever you click back in your browser you are taken to the top of the page instead of back to where you were before you decided to click a link. (Mobile safari seems to be the only browser that remembers scroll position on div's aswell as body)
I can't really think of any more solutions to this, except for maybe some sort of javascript. Does anyone have some experience with similar cases, or any ideas on how to accomplish this?
The solution must:
Prevent scrolling on page content when navigation is open
Preserve scroll position on page content when navigation is open
Remember scroll position on previous page when back-button is used
I have a problem where moving the cursor and clicking in text fields causes the page to show a wait cursor and also makes the page very unresponsive.
See this video for an example of it happening.
It only happens in IE7.
I've tried checking where I think it might be sending off ajax requests (thought this could be changing the cursor).
I've checked where I think multiple events may be firing simultaneously and tried commenting it out.
Has anyone seen anything similar happen and can point me in the right direction?
What is IE7's criteria for displaying the wait cursor?
Eventually I narrowed down the issue. After eliminating code bit by bit I deduced the problem isn't caused by JavaScript at all, it's a css issue.
The exact line of css is
overflow-y: auto
I don't know exactly the circumstances to reproduce it. But for a bit of info that might help others... The container the css is applied to is positioned absolutely. It has a fixed size (which also seems to be changed in JavaScript) and width. It's parent container is a div with display:block;.
Curiously if you scroll to the bottom of the container and back up it seems to fix the flickering bug.
On most websites, you can press your scroll wheel and drag the mouse around in order to scroll. I use this all the time, and I'm sure others do too.
However when I use jScrollPane to replace the scroll bar, it simply doesn't work. Is there any workaround available?
Edit: Video to clarify what I mean, on the first page it works, but not on the second one.
http://screencast-o-matic.com/watch/cX60XpOwT
This is not possible without either 1) creating a custom method for handling middle-click and scroll or 2) in someway hiding the orginal scrollbar under something else or out of the screen. So theoretically, it's possible, but it's not included in jScrollPane at this time.