carouFredSel Slider - 防止在幻灯片滚动时滚动到顶部

Question

我正在尝试找出解决此问题的方法。每当轮播幻灯片移动或滑动滚动时，页面滚动到屏幕顶部。

参考站点： http://www.resmed.com/uk/en/index.html

如何复制：向下滚动到横幅滑块的一半，并确保轮播幻灯片横幅对您可见

Answer 1

将过渡类型（滚动效果）更改为不同的类型我的滚动设置不会导致页面滚动到顶部（在 fx 属性设置为 'crossfade' 之前）：

滚动：{持续时间：600，timeoutDuration：8000，fx：'cover'}，

fx 属性可以有这些值（我还没有测试它们，你必须测试看看它们中的哪些有效以及你更喜欢哪些有效）： "none"、"scroll"、"directscroll"、"fade"、"crossfade"、"cover"、"cover-fade"、"uncover" 或 "uncover-fade"

Answer 2

我也一直在寻找同样的答案。这似乎是 Chrome 57 中引入的一个错误，用于 caroufredsel.js.

的淡入淡出效果

我不是 100% 知道为什么会这样，但我已经设法修复了。

我基本上在覆盖整个幻灯片的旋转木马包装内创建了一个 div。这会阻止它再次跳到屏幕顶部。

希望这能解决您的问题。 :)

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

我能够通过添加 CSS 溢出锚点来解决这个问题： none; 到 .slider-项目 元素

我认为这与 Chrome 的更高版本在 HTML 内容更改时如何处理滚动位置有关。

Answer 4

示例解决方案（#featured_slider - 滑块 ID）：

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

carouFredSel Slider - 防止在幻灯片滚动时滚动到顶部

carouFredSel Slider - prevent scroll to top on slides rolling

javascript

scroll

google-chrome

jquery-plugins

caroufredsel