滚动y，但固定到x - bug在ios

Scroll y but fixed to x - buggy in ios

本文关键字：bug ios 滚动      更新时间：2023-09-26

我使用一些javascript来保持我的div固定时水平滚动，但随着内容垂直滚动时滚动。

我唯一的问题是，当我在ipad上查看它时，我向右和向左滚动，div消失，直到滚动动作停止，然后在你停止滚动后返回到正确的位置。

有没有办法在ipad上解决这个问题?

这是我正在使用的代码。

CSS:

#header {
top: 15px;
left: 15px;
position: absolute;
width: 100px;
height: 100px;
}
#longDiv {
margin: 100px 0 0 0;
width: 140%;
height: 4000px;
border: 1px #000 solid;
background:grey;
}
HTML:

<div id="header">
Haha, I am a header. Nah.. Nah na na na
</div>
<div id="longDiv">
I am a bit of buffer test
</div>

脚本:

$(window).scroll(function(){
$('#header').css({
    'left': $(this).scrollLeft() + 15 //Why this 15, because in the CSS, we have set     
left 15, so as we scroll, we would want this to remain at 15px left
});
});

这里是jsfiddle http://jsfiddle.net/susannalarsen/05b9Lnng/1/

看来你想要实现的可以用CSS完成，没有必要用JS。

为什么不这样做呢? 

<div id="header">
    Header here 
</div>
<div id="scrollDivWrapper">
    <div id="scrollDiv">
        <p>This internal wrapper div has a wider width than it's parent div.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nibh nibh, ut volutpat turpis. Aliquam at nunc nisl. Curabitur sit amet lectus eget ligula interdum molestie. Vestibulum ultricies tortor eleifend mi luctus lacinia.</p> 
    </div>
</div>
CSS

#header {
    width: 100%;
    height: 100px;
}
#scrollDivWrapper {
    width: 100%;
    height: 300px;
    overflow-x:scroll;
}
#scrollDiv {
    width:150%;
}

最终结果将是一个横向滚动的div，它也与页面上的所有其他内容一起垂直滚动。不需要JS操纵其他元素!

确保您的目标设备可以处理overflow-x。它一开始并没有很好地支持设备，因为它是几个CSS属性之一，允许设备用户被"困"在一个不可避免的div中。

这里是提琴

相关文章：