2017-08-07 59 views
18

我在一個網站上使用bootstrap datepicker,它的樣式是通過給它的父母一個固定的位置來粘性,它的工作正常,但在Ipad和Iphone上測試它(未在onriod設備上測試過),當我向下滾動並嘗試觸摸日期選擇器以打開它時,它會滾動回頁面頂部,我該如何解決此問題?當我使用自定義的下拉Selectric引導日期選擇器上的粘性問題

我創建了問題here的簡單條紋縮小版本

類似的問題出現了。請注意,該問題不會在仿真器上覆制,而會在實際的移動設備或ipad上覆制。

+0

它可能是因爲你的'日期選擇器,parent'有風格'位置:fixed'。我認爲你應該能夠沒有它的工作。 – Nisarg

+0

但我希望它能粘到頂端。 – UmeRonaldo

+0

你能解釋一下你的問題嗎?我查了ipad,但是,不明白你的問題。 – anu

回答

0

試試這個

.dropdown-menu{ 
position: fixed!important 
} 
+0

沒有爲我工作 – UmeRonaldo

0

這一問題已被發現不相關的特定的環境(不是僅適用於iOS),並有一個解決方案如下:

你應該找出哪些日期選擇器的div類組從隱藏的實際日期選擇器可見(其中哪些在成功顯示和隱藏事件時發生變化)。

添加到你的CSS爲類(這裏模式打開)丟失的show命令:

body.modal-open { 
    overflow: visible; 
} 

現在滾動應留在原地。

實施例是指爲HTML等:

<body> 
     <div class="modal-open"> 
      Datepicker 
     </div> 
</body> 

來源:

Bootstrap modal: background jumps to top on toggle

PS。我的來源還有其他18個選項,如果這看起來太hacky。

我已經做了這個當前的一次,像魅力工作,並沒有那麼棘手。

+0

沒有附着體類的日期選擇器打開時,它的工作原理是在身體的末端,沒有風格改變身體追加一組HTML的。 – UmeRonaldo

0

如果您在檢查元素中查看它,它會在html中創建單獨的div,其位置absolute只是將該位置更改爲sticky,即爲什麼會發生這種情況在圖像中看到。

enter image description here

您可以通過加入這一行的CSS代碼,這樣做:

.dropdown-menu { 
    position: sticky; 
} 

希望這將有助於你

+0

現在試過了,但問題沒有解決,我也試過它在父母的datepicker父母。這兩個新的測試與名稱test2.html上傳和test3.html – UmeRonaldo

+0

讓我檢查一下你的 –

+0

TEST2工作正常我檢查它的粘性現在 –

-1

作爲開始,你看通了GH回購的問題進行與您的描述相符的東西

這個環節具體聽起來前途:

我想可能發生的是,你的日期選擇器設置爲絕對主體,而不是父母要設置「固定的」。

因此,當你點擊打開日期選擇器,您的移動設備滾動你的有源元件(在這種情況下,日期選擇器頂部,設置爲絕對父)。

而且似乎是與滾動一些默認的移動行爲:

也許設置以下幫助:

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ 

以下鏈接提供更多的上下文對此滾動行爲:

+0

@Baum MIT眼球 - 謝謝,我試圖提高自己的答案。請讓我知道是否需要做更多。 – prufrofro