Clever Geek Handbook

Chrome: hover over some elements to move the vertical scroll bar to the top

I have an application that contains a vertical scrollbar on a page because one of my two lists on the page can be very long and I want the user to scroll up or down. I found that sometimes the user just hovers over other elements on the page, and all of a sudden if the scrollbar is at the bottom, Chrome makes the scrollbar jump up.

Has anyone seen this behavior in Chrome? It works great with other browsers. I tried to change the bottom padding on one of my header divs:

padding: 0.75em 2em 1.75em 2em;

and it seems to have reduced the problem, but the problem still occurs sometimes. One thing I notice is that it happens when one of my lists is too long.

+3


source to share


2 answers


This turned out to be a CSS issue. Whenever the element was hovered, CSS added a drop shadow to the element using the: hover selector. This increased the border and caused the list to resize. When I removed the shadow, the problem went away. This is not a Chrome problem.



+2


source


I see that you've already solved your problem, but I ran into a very similar problem where Chrome (and only Chrome) scrolled down the list to the top when the first item in the list was hovering. I didn't have a drop shadow for the boxes, but instead had a padded list:

.list {
    padding: 0 10px;
}

And when the list item was visible, negative margin and some padding were added (for some reason I can't remember):



.list-item:hover {
    margin: 0 -10px;
    padding: 0 10px;
    background-color: lightblue;
}

It didn't resize the list, at least not visually. But after seeing your question and answer, I changed it so that there is no indentation in the list and instead all the items and margins are in the list items. Problem solved!

0


source






More articles:


All Articles