0

下面的示例是我用于我的投资组合网站的方法。

它在“我住的地方”、“它是如何开始的”和“我的工作方式”中，每个滑块都有图像和谷歌地图。我在我的网站的示例中输入代码，除了我删除了“溢出：隐藏”，因为它导致黑色方块出现并在 Chrome 的屏幕上闪烁。滑块在台式计算机中的浏览器上运行良好。

当我在 Iphone 中使用 safari 和 chrome 以及在 android 中使用 chrome 等移动浏览器时，就会出现此问题。

即使我没有打开它，“滑块”中的谷歌地图也会出现在屏幕顶部，并且当我在关闭页面后滚动页面时，“slider3”中的图像会卡在屏幕上。在移动 Safari 的情况下，一开始看起来还不错，但是一旦我打开和关闭滑块，当我滚动页面时，它们就会卡在屏幕的顶部或底部。

我对“slider2”没有同样的问题，也许是因为它在旁边。

有谁知道为什么移动浏览器会出现问题？

提前致谢。

jsfiddle

html

<div style="height:100%">
<span id="button">open slider 1</span>
<span id="button2">open slider 2</span>
<span id="button3">open slider 3</span>

    <div id="slider"> <span id="button4">close</span>
    </div>
    <div id="slider2"> <span id="button5">close</span> 
    </div>
    <div id="slider3"> <span id="button6">close</span> 
    </div>
</div>

css

html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin:0;
}
.page.in {
    left: 0;
    z-index: 1;
}

#slider {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 100%;
    background: yellow;
    transition: bottom 1s;
}
#slider.in {
    bottom:50%;
}
#slider2 {
    position: absolute;
    width: 50%;
    height: 100%;
    left:100%;
    top:0;
    background: red;
    transition: left 1s;
}
#slider2.in {
    left:50%;
}
#slider3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top:100%;
    background: blue;
    transition: top 1s;
}
#slider3.in {
    top:0;
}

javascript

$('#button').click(function(){
    $('#slider').addClass('in');
});

$('#button2').click(function(){
    $('#slider2').addClass('in');
});

$('#button3').click(function(){
    $('#slider3').addClass('in');
});

$('#button4').click(function(){
    $('#slider').removeClass('in');
});

$('#button5').click(function(){
    $('#slider2').removeClass('in');
});

$('#button6').click(function(){
    $('#slider3').removeClass('in');
});
4

0 回答 0