iPad滾動 - 標題僅在滾動結束時設置爲固定

我將英雄單位設置爲滾動至其位置後固定的位置。因此，對於頁面的第一個70px，英雄單位隨着其餘部分一起滾動，直到頂部達到需要修復的英雄單位。iPad滾動 - 標題僅在滾動結束時設置爲固定

不固定

enter image description here

固定

enter image description here

這工作得很好無處不在，也是iPad的不同之處在於位置設置爲當滾動完成固定而不是像瀏覽器那樣在滾動期間。

我知道這是因爲在動量滾動期間沒有觸發滾動事件。我試圖解決這個使用下面的代碼，但它不工作：

document.addEventListener("touchstart", function(){ 
    $('body').prepend('<p>touch start</p>'); 
    that.tid = setInterval(function(){ 
     $.event.trigger(
     { type: "touchcontinuem" } 
     ); 
    },10) 
}, false); 

document.addEventListener("touchend", function(){ 
    $('body').prepend('<p>touch end</p>'); clearTimeout(that.tid); 
}, false); 

$(document).on("touchcontinuem", function(){ 
    $('body').prepend('<p>touch continuem</p>'); 
});

我想實現的是英雄單位可以設置成固定的，而滾動仍然忙。如果任何人都可以提出改進建議或替代方案，我將非常感激，因爲我現在被卡住了。

來源

2014-07-17 Christophe

你能提供給我一個小提琴對於這個...... lemme試試吧.. – PraJen

有可能是IPAD的瀏覽器，你指的是哪一個？你有沒有用IPAD上的其他瀏覽器嘗試過？ – Tasos

我相信這是它的工作方式，但請注意，這隻發生在第一次滾動動作。其餘的，得到修復。我不認爲有這個解決方法...也許在未來的IOS版本？ –

英雄元素https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

can i use

，而這本身會做的伎倆在Safari中，你仍然需要滾動操作對於不支持粘定位的瀏覽器上使用position: sticky;。

來源

2014-07-26 06:04:54 tommyTheHitMan

取決於他需要什麼，這可能是一個很好的解決方案。但是對它的支持是非常糟糕的。 –

這是解決方案，因爲Apple不允許iOS的瀏覽器進入App Store，除非它們基於WebKit。 WebKit是Safari的引擎，支持'position：sticky;'。只要確保風格僅適用於iPad。 – Julian

正如toni指出的那樣，touchstart/event只有在滾動結束後觸發纔會出現問題。你可以嘗試使用偏離元素的頁面的頂部內

$(window).on("scroll", function() { 
    If ($(element).offset().top < 70) 
     Do thigs 
    Else 
     Do other 
})

以檢查你的元素是相對於頁面頂部

來源

2014-07-24 18:23:27

我已經在使用此代碼。它可以在桌面上完美運行，但在iPad上無法運行。這個事件在滾動期間不會被觸發，因此如果我使用偏移量沒有關係 – Christophe

這是一個大問題我在過去。有幾種解決方法可行，但它們通常會破壞其他瀏覽器/設備的體驗。

This一種在iOS Safari上的作品，但它會阻止它在桌面和許多其他移動瀏覽器上工作。

var count = 0; 

document.addEventListener("touchmove", function(){ 
    var data = document.getElementById('data'); 
    data.innerHTML = count++; 
});

有A great article here，突出的3個或4個不同的變通辦法的利弊此問題。但是，可悲的是，沒有真正的結論。

TL; DR - 不，對此沒有堅定的解決方法，但有一些解決方法可以提供幫助。

來源

2014-07-25 11:18:18

這是一個恥辱。這種感覺就像我試圖在IE中做一些工作... :)無論如何，我會試試看。我將只能運行iPad或觸摸設備，以免干擾桌面行爲 – Christophe

假設你的英雄單位有id="hero-unit"，那麼你就可以改變它的位置使用，檢查它的距離從屏幕的頂部，這樣的監聽器固定：

var el = document.getElementById('hero-unit'); 

document.addEventListener('touchmove', function() { 
    var distance = el.getBoundingClientRect().top; 

    if (distance <= 0) el.style.position = 'fixed'; // Attach it to the top 
    else el.style.position = 'some other value'; // Dethatch it from the top 

}, false);

來源

2014-07-29 22:48:03

iPad滾動 - 標題僅在滾動結束時設置爲固定

回答

相關問題