javascript - 滚动 y 但固定到 x - ios 中的错误

Question

我正在使用一些 javascript 在水平滚动时保持我的一个 div 固定，但在垂直滚动时与内容一起滚动。

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

有没有办法在 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/

Answer 1

看起来你想要实现的目标可以用 CSS 完成，不需要 JS。

为什么不做这样的事情:

HTML

<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 .它没有start with great device support因为它是允许设备用户“陷入”无法逃避的 div 中的几个 CSS 属性之一。

这是 Fiddle