I have a webpage that loads comments from a MySQL table, by appending "comment" divs one at a time into a collective "comments" parent div. However, this has caused some problems with scrolling in Google Chrome. I've tested this behavior in Firefox and it works fine there.
If I refresh the page anywhere above where the bottom of the page would be without any comment divs, the refresh works just fine and the scroll bar is where it should be.
However, if I refresh the page after scrolling beyond the first appended comment div, the page sets the vertical scroll position to where it would be if the comment divs weren't appended at all. I can't scroll down with the mouse wheel, as if Chrome thinks the divs were never appended, even though they are clearly there and the scrollbar shows them to be there.
If I scroll up one tick of my scroll wheel from there, the page scrolls "up" to where the scroll bar would be after scrolling up one tick from the actual bottom of the page, with all of the comment divs appended. It's like the scroll bar is in two places at once, the "bottom of the page" if the comments weren't appended and the actual bottom of the page with the comments appended. Very confusing.
Scrolling by clicking and dragging on the scrollbar works just fine. Likewise, scrolling "up" and then scrolling either up or down from there works too. I just can't scroll downward without scrolling "upward" first or starting the page refresh at a point other than one below where the bottom of the page would be without the comments appended.
I'm not entirely sure what's going on or how to fix it, and the only other mention of this I've seen on the internet doesn't have an explanation or a solution. Would anyone be familiar with what's happening, why it's happening, and how to prevent it?
Related
I apologize for the poor wording of my title, I am not sure how to explain my question in the most concise way.
I have an isotope JavaScript plugin that filters I use to filter some elements. The plugin works fine, however I added my own "No results" text that appears when there are no results. It functions correctly, however what is not working is the animation.
At the moment, if you are scrolled down on the page, and the results go from multiple shown results to 0 results where my "No Results" code appears, there is an animation glitch where my footer (which I have set using flex display to be at at the bottom of the screen) moves up from the bottom, and then snaps into the bottom.
I have worked out that one possible solution for this may be to give the "No results" text a height that would make all of the contents on the page add up to 100vh. Is there a way to calculate it so that it will be the calculated height of what is left on the page to ensure the min size of the contents of the page are 100vh.
Here are some screenshots of the issue:
This is how it should look the entire time when there are no results. However this only happens at the end of the animation
This is what happens during the actual animation. The page resizes in a strange way where the footer first moves up, leaving the white space at the bottom and only then does it snap down into position.
Attached is the live code of my site, to see what I mean, please first scroll down and then click the "Financial Sustainability" checkbox.
Link to live code
If anyone has any advice at all about this, even on how to explain the question better, I am open to any feedback and suggestions and I really appreciate all of the support.
I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bit. It happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down. The elements are actually visible where they should be, but touch events and inspecting via Chrome dev tools shows it is misplaced.
This screenshot shows this weird behavior:
remote device inspect
I have tried forcing hide/show after focus in/out of inputs. I also tried the footer inside the container and after it. (and some other stupid ideas that didn't help). I thought about changing the element in every scroll, but this page has a form with 150 questions (some with sub-questions) and already is quite heavy.
Any ideas?
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 dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.