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.
Related
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/
In my application I'm using vuejs with some extensions like: vuex, vue-router and more. The problem I'm having is that on every reload my application moves a bit to the left because of a scrollbar and then gets back to it's original position.
Any help?
If you dont want anyone to sroll on the page, you can just add
.className {
overflow: hidden;
}
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
whenever the page's height is larger than the web browser window a scrollbar will appear to the right so you can scroll down/up in your page.
could scrollbar be displayed with javascript/jquery all the time even if there is no need for it? (has to do with a layout issue i've got)
You can do that even without javascript, it is a CSS property:
overflow: scroll
But this will also always show a scrollbar at the bottom. Afaik you cannot avoid this.
It might be that this confuses the user somehow as normally he is not used to the fact that a scrollbar is shown even if he cannot scroll.
Before you use this solution, you should try to fix your layout issue.
If you give the appropriate container element the style `overflow: scroll' then it'll have scrollbars. You can do that with jQuery if you like:
$('#containerId').css({overflow: 'scroll'});
Or of course you can do it in a CSS file, or even right on the element itself. You'll have to figure out which element to do that to; post some code if you need advice.
Don't need javascript. Just add the css
body{
overflow: scroll;
}
window.scrollBy is not working on the following page
http://www.resident.co.il/aspx/places.aspx?t=4&a=1
Any idea what can be the problem ?
Entering javascript:window.scrollBy(0,10) in the address bar scrolls the window fine for me. I can't see any call to window.scrollBy in the page or attached scripts so I don't know where any failed attempt to scroll might be.
Edit re comment: aahhh, I see. You can only scroll it a little bit, because the document is only ever a little bit taller than the viewport. This is because of the:
position: absolute; width: 100%; height :100%; overflow: auto;
on the wrapper div. You would have to scroll this div, not the window itself, to make the main page of the page move.
I have absolutely no idea why the page is doing this, but then I have no idea why the page is doing a dozen other horrific markup abuses either. Could easily be rewritten to use just a few divs and position: fixed (with JS shim for IE6) instead of the crazy overflow stuff and the five levels of nested tables. (What is this, 1996?)