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

You need to provide code that you have tried. We can't help you with just a reference site. — Ravi Patel, Feb 13 '17 at 10:47
Hi Ravi patel, Since i'm new to this blog not able to add the 500 lines of code. — Prabhu Shanmugam, Feb 14 '17 at 06:34
JSFIDDLE link: https://jsfiddle.net/prabhumachismo/4aqk4gtz/1/#&togetherjs=xQCTghg6f6 — Prabhu Shanmugam, Feb 14 '17 at 07:14
Oddly we are having the exact same issue in a production site. We are using version 6.2.1. of carouFredSel. — tidmutt, Feb 14 '17 at 17:16
Looks like it was a change in Chrome. We cannot reproduce in other browsers and other evidence suggests it's chrome. Setting fade off resolves the problem for us. — tidmutt, Feb 14 '17 at 18:08
Hi tidmutt, Could you please explain in detail. i got frustrated for the last 3 days not able to resolve it, so please let me know solution. Thanks in advance — Prabhu Shanmugam, Feb 16 '17 at 13:48
Handy Andy Mutter solved it. @Prabhu Shanmugam, you should mark his answer as correct. — Carey Estes, May 10 '17 at 21:25

score 4 · Answer 1 · answered Feb 08 '18 at 13:32

4

Example solution (#featured_slider - slider id):

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

answered Feb 08 '18 at 13:32

Yurij Tutov

41
1

This worked for me. And doesn't require any changes to the html. – Robbie Chiha Mar 08 '18 at 13:36

score 3 · Accepted Answer · answered May 02 '17 at 15:34

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>

This should be the accepted answer / hack as this works. Great job! — Carey Estes, May 10 '17 at 21:24
Been trouble-shooting this issue for a couple of hours now, this just saved me a couple of more hours of trouble-shooting. Works great, thank you! — dannyk, Jun 15 '18 at 16:29

score 2 · Answer 3 · answered Nov 07 '17 at 15:03

2

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.

answered Nov 07 '17 at 15:03

Tom

21
1

score 0 · Answer 4 · answered Feb 23 '17 at 10:16

0

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"

answered Feb 23 '17 at 10:16

user3755716

75
1
5

Hi Buddy, Thanks for sharing your comments, i have already tried with all scroll options but still getting this scroll to top issue for fade effects, rest of the options are works fine. – Prabhu Shanmugam Mar 07 '17 at 08:50

carouFredSel Slider - prevent scroll to top on slides rolling

4 Answers4