0

I am working with some pretty simple HTML, CSS, and JavaScript and running into a strange issue in Chrome that seemed to crop up out of nowhere. Basically, once the user scrolls past a certain point on the screen, a 'Return-To-Top' button is displayed in the bottom right corner. Clicking this button takes the user back to the top of the screen.

The issue I am having is that in Google Chrome only, when the button is changing from "display: none"; to "display: block", the mousewheel scrolling stops working for about five seconds.

If I scroll the page using the arrow keys or page up/down, it is not an issue. It seems to happen more often if I scroll slowly with the mouse wheel. When the scrolling is not working, if I continue to scroll the problem actually last longer. If I stop scrolling for a second and then begin scrolling again it works as expected.

HTML: 

<button onclick="topFunction()" id="myScrollBtn"><i class="fa fa-arrow-up"></i></button>

CSS:

#myScrollBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: #e2e2e3;
    color: #e35205; 
    cursor: pointer; 
    padding: 12px; 
    border-radius: 10px; 
    opacity: .75;
}

#myScrollBtn:hover {
    background-color: #909195;
}

Javascript that controls the display of the button:

 //When the user scrolls down 200px from the top of the document, show the return-to-top button
window.onscroll = function () { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("myScrollBtn").style.display = "block";
    } else {
        document.getElementById("myScrollBtn").style.display = "none";
    }
}

As stated, this is only an issue in Google Chrome. Scrolling is working fine in Edge, FireFox, IE and Safari. I temporarily commented out the javascript and verified that the scrolling issue was no longer present in Chrome, so it does appear to be related to the changing of the display.

If someone could point me in the right direction here that would be great.

Cameron Gray
  • 57
  • 1
  • 9
  • Can you give a working example. With just one line it's difficult to track down the issue. – Jens Ingels Apr 10 '18 at 15:06
  • Btw what type of icon import are u using. I just test it your example and I don't have an issue. It might be possible the issue is because of the icon: https://fiddle.jshell.net/4vvwpntn/4/ – Jens Ingels Apr 10 '18 at 15:11
  • I can try to put together a working example. It is difficult because this functionality is part of a master page which is the header and footer present on each page of the application. The icon is just an arrow from fontawesome 4.7. – Cameron Gray Apr 10 '18 at 15:13
  • PS I did just try disabling the icon and that did not make a difference. – Cameron Gray Apr 10 '18 at 15:14
  • Hm, do you use css transition or any other form of animation? I believe display will be effected by this when set all. – Jens Ingels Apr 10 '18 at 15:16
  • Nope, no transitions or animations. I tried disabling smooth-scrolling in Chrome as well and it changed the behavior of the issue. Instead of the scrolling getting stuck, it almost appears to 'bounce' a few times at the spot where it was stuck before allowing you to scroll past it. – Cameron Gray Apr 10 '18 at 15:22
  • Their might be a conflict with it. If you override it you need to set the behaviour yourself. Until you provide an example. T'is is the limit what I can give you now: https://css-tricks.com/snippets/jquery/smooth-scrolling/ – Jens Ingels Apr 10 '18 at 15:31
  • 2
    I actually managed to find a workaround to this using this thread: https://stackoverflow.com/questions/12969228/chrome-slow-scrolling-with-fixed-position-elements?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Cameron Gray Apr 10 '18 at 15:50
  • Seems that Chrome does not place nicely with scrolling and position: fixed elements. – Cameron Gray Apr 10 '18 at 15:50

0 Answers0