我在一個網站上使用bootstrap datepicker,它的樣式是通過給它的父母一個固定的位置來粘性,它的工作正常,但在Ipad和Iphone上測試它(未在onriod設備上測試過),當我向下滾動並嘗試觸摸日期選擇器以打開它時,它會滾動回頁面頂部,我該如何解決此問題?當我使用自定義的下拉Selectric引導日期選擇器上的粘性問題
我創建了問題here的簡單條紋縮小版本
類似的問題出現了。請注意,該問題不會在仿真器上覆制,而會在實際的移動設備或ipad上覆制。
我在一個網站上使用bootstrap datepicker,它的樣式是通過給它的父母一個固定的位置來粘性,它的工作正常,但在Ipad和Iphone上測試它(未在onriod設備上測試過),當我向下滾動並嘗試觸摸日期選擇器以打開它時,它會滾動回頁面頂部,我該如何解決此問題?當我使用自定義的下拉Selectric引導日期選擇器上的粘性問題
我創建了問題here的簡單條紋縮小版本
類似的問題出現了。請注意,該問題不會在仿真器上覆制,而會在實際的移動設備或ipad上覆制。
這一問題已被發現不相關的特定的環境(不是僅適用於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。
我已經做了這個當前的一次,像魅力工作,並沒有那麼棘手。
沒有附着體類的日期選擇器打開時,它的工作原理是在身體的末端,沒有風格改變身體追加一組HTML的。 – UmeRonaldo
如果您在檢查元素中查看它,它會在html中創建單獨的div,其位置absolute
只是將該位置更改爲sticky
,即爲什麼會發生這種情況在圖像中看到。
您可以通過加入這一行的CSS代碼,這樣做:
.dropdown-menu {
position: sticky;
}
希望這將有助於你
現在試過了,但問題沒有解決,我也試過它在父母的datepicker父母。這兩個新的測試與名稱test2.html上傳和test3.html – UmeRonaldo
讓我檢查一下你的 –
TEST2工作正常我檢查它的粘性現在 –
作爲開始,你看通了GH回購的問題進行與您的描述相符的東西
這個環節具體聽起來前途:
我想可能發生的是,你的日期選擇器設置爲絕對主體,而不是父母要設置「固定的」。
因此,當你點擊打開日期選擇器,您的移動設備滾動你的有源元件(在這種情況下,日期選擇器頂部,設置爲絕對父)。
而且似乎是與滾動一些默認的移動行爲:
也許設置以下幫助:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
以下鏈接提供更多的上下文對此滾動行爲:
@Baum MIT眼球 - 謝謝,我試圖提高自己的答案。請讓我知道是否需要做更多。 – prufrofro
它可能是因爲你的'日期選擇器,parent'有風格'位置:fixed'。我認爲你應該能夠沒有它的工作。 – Nisarg
但我希望它能粘到頂端。 – UmeRonaldo
你能解釋一下你的問題嗎?我查了ipad,但是,不明白你的問題。 – anu