代码之家 › 专栏 › 技术社区 › Scott Chu

在iPad上制作Safari网页的粘性标题

sticky-windows safari ipad

2

Scott Chu · 技术社区 · 15 年前

http://www.cssplay.co.uk/layouts/fixit.html 已经做了!

提前谢谢!

2 回复 | 直到 15 年前

1

2

DrMadder 14 年前

事实上,对于iOS设备(iPad、iPhone等),您只需在CSS中添加以下内容即可解决此问题:

#container {
  position:fixed; 
  top:120px;
  bottom:0px; 
  overflow:auto; 
}

本例假设:

收割台将为120px高)
要滚动的div有一个id='container'
你将用两个手指滚动它。如果你用一根手指收割台也会移动。

最后请注意,这是针对“Apple”浏览器的(我在iPad、Mac Safari和Chrome上成功地进行了测试),因此如果您想支持其他内容,则必须使用以下内容创建不同的代码:

if (navigator.userAgent.match("Apple") == null) {
    /* use a different container id */
}

2011年10月7日编辑:Thx致克里斯-巴尔网我找到了这个解决办法。只需添加以下代码:

<script>
function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}
</script>

<body onload="touchScroll('container')">

2

0

Eiko 15 年前

网页的好处是,您可以随时轻松地检查其源代码。

#收割台 在css部分定义

position:fixed;

以及大小和其他格式说明。