Question

我试图弄清楚这个问题的解决方案。每当轮播幻灯片在滚动时移动或滑动，页面滚动到屏幕顶部。

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

如何复制：向下滚动到横幅滑块的一半，确保旋转木马滑动横幅对您可见

Answer 1

我也一直在寻找相同的答案。这似乎是Chrome 57中针对caroufredsel.js的淡入淡出效果引入的错误。

我不是百分之百为什么会这样，但无论如何我都设法得到了解决方案。

我基本上在旋转木马包装器中创建了一个div，它覆盖了整个幻灯片。这样就可以阻止它再次跳到屏幕顶部。

希望这能解决您的问题。：）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

示例解决方案（#featured_slider - slider id）：

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

Answer 3

将过渡类型（滚动fx）更改为其他类型我的滚动设置不会导致页面滚动到顶部（在fx属性设置为＆＃39; crossfade＆＃39;之前）：

scroll：{duration：600，timeoutDuration：8000，fx：＆＃39; cover＆＃39; }，

fx属性可以具有这些值（我还没有对它们进行全部测试，你必须测试它们哪个有效，哪个有用你喜欢的）：＆＃34;无＆＃34;，＆＃34;滚动＆＃34;，＆＃34; directscroll＆＃34;，＆＃34;淡出＆＃34;，＆＃34;交叉渐变＆＃34;，＆＃34;覆盖＆＃34;，＆＃34;封面淡出＆＃34;，＆＃34;揭露＆＃34;或＆＃34; uncover-fade＆＃34;

Answer 4

我能够通过将 overflow-anchor：none; 添加到 .slider-item 元素来解决此问题

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

carouFredSel滑块 - 防止滚动到滚动的顶部滚动

4 个答案: