carouFredSel Slider - prevent scroll to top on slides rolling

Question

I'm trying to figure out the solution for this issue. Whenever the carousel slides moves or slides on rolling, page scroll to top of the screen.

Reference Site: http://www.resmed.com/uk/en/index.html

How to replicate: scroll down to half of the banner slider and make sure carousel slide banner is visible to you

Answer 1

I have been searching for the same answer for a while as well. It seems to be a bug introduced in Chrome 57 for fade effects on the caroufredsel.js.

I am not 100% why this works but I have managed to get a fix anyway.

I have basically created a div inside the carousel wrapper which overlays the whole slideshow. This then stops it from jumping to the top of the screen again.

Hope this solves your problem. :)

.chrome-fix {
    position:absolute;
    width:100%;
    height:100%;
}

            <div class="caroufredsel_wrapper">
                <div class="chrome-fix"></div>
                <ul id="foo2">
                    <li>
                        <img src="/img.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img3.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img4.jpg" alt="" />
                    </li>
                </ul>
            </div>

Answer 2

Change the transition type (scroll fx) to something different My scroll settings which doesn't cause the page to scroll to top (before the fx property was set to 'crossfade'):

scroll: { duration: 600, timeoutDuration: 8000, fx: 'cover' },

The fx property can have these values (I haven't tested them all, you have to test to see which of them works and which of the working ones you prefer): "none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" or "uncover-fade"

Answer 3

I was able to fix this issue by adding the CSS overflow-anchor: none; to the .slider-item element

I think it has something to do with how later versions of Chrome handle scroll position when HTML content changes.

Answer 4

Example solution (#featured_slider - slider id):

#featured_slider:before {
    content: '';
    position:absolute;
    width:100%;
    height:100%;
}