從滾動寬鬆中排除對象

Question

我正在開發一個帶有PhoneGap的HTML5應用程序，該應用程序在啓用滾動的情況下具有較長的頁面。手機上的默認設置（至少iPhone），當您滾動到頂部時，內容會緩解（我可以提出的最佳描述）。因爲PhoneGap使用瀏覽器，所以我的頭文件也會受到這個我不想要的緩動。

是否可以允許某些HTML對象的緩動但不允許其他對象？

Answer 1

檢查https://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File - 你可以控制你的頁是否允許反彈時加給你的​​3210文件：

<preference name="DisallowOverscroll" value="true"/> 

這不會從滾動當然，停止你的頁面 - 你會幾乎可以肯定的是，仍然需要在頁面頂部修正頁眉，以獲得本地體驗。此外，你幾乎肯定要保留的原生反彈時的行爲就是你的長文本區域，所以用這個在你的CSS需要維護本地滾動行爲元素：

overflow: auto; 
-webkit-overflow-scrolling: touch; 

---

新增9 /二千〇一十四分之四：

---

這裏是我的典型的DOM結構：

<div class="ui-container"> 
    <div class="ui-navigation-bar"> Title of View </div> 
    <div class="ui-scroll-container"> Long Content Goes Here</div> 
</div> 

在上述結構中，導航欄固定在屏幕的頂部，CSS與此類似：

.ui-navigation-bar { 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    height: 44px; /* height: 64px; padding-top: 20px; for iOS 7, assuming border-box sizing */ 
    z-index: 9; /*use transform: translateZ(9px) if using 3D transforms*/ 
} 

值得一提的是，ui-container也定位絕對：

.ui-container { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 0; 
} 

最後滾動內容接收該：

.ui-scroll-container { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    overflow: auto; 
    -webkit-overflow-scrolling: tough; 
    padding-top: 44px; /* avoid navbar; iOS 7: 64px */ 
} 

這解決的報頭添加到屏幕的頂部（或下一個定位的父），和地點它高於可滾動內容。可滾動內容位於其自己的div中，可確保其與所有其他內容分開滾動（並彈跳），從而保持原有感覺。

重要的是要注意，您可以使用top:44px代替padding-top: 44px是很重要的 - 我用填充的原因是因爲我經常應用漸變導航條來模擬iOS7的迷離酒吧。這不是本地完美的，但它確實允許iOS 7的下滾動或不透明效果。