最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - carouFredSel Slider - prevent scroll to top on slides rolling - Stack Overflow

programmeradmin9浏览0评论

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: .html

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

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./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

Share Improve this question edited Feb 17, 2017 at 6:59 Prabhu Shanmugam asked Feb 13, 2017 at 10:29 Prabhu ShanmugamPrabhu Shanmugam 657 bronze badges 8
  • You need to provide code that you have tried. We can't help you with just a reference site. – Ravi Patel Commented Feb 13, 2017 at 10:47
  • Hi Ravi patel, Since i'm new to this blog not able to add the 500 lines of code. – Prabhu Shanmugam Commented Feb 14, 2017 at 6:34
  • JSFIDDLE link: jsfiddle/prabhumachismo/4aqk4gtz/1/… – Prabhu Shanmugam Commented Feb 14, 2017 at 7:14
  • Oddly we are having the exact same issue in a production site. We are using version 6.2.1. of carouFredSel. – tidmutt Commented Feb 14, 2017 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 Commented Feb 14, 2017 at 18:08
 |  Show 3 more ments

4 Answers 4

Reset to default 4

Example solution (#featured_slider - slider id):

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

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>

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.

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"

发布评论

评论列表(0)

  1. 暂无评论