Предотвращение фиксации положения абсолютного элемента внутри прокручиваемого div

Question

Эта проблема связана с несколькими элементами (например, с помощью выбора цвета, выбора даты и выбора времени), где, когда они выходят и, таким образом, расположены по абсолютной относительности относительно входа, если пользователь свитки вновь созданного элемента также перемещаются вместе с ним.

Основываясь на характере большинства плагинов (все основные плагины для начальной загрузки, я это заметил) Я пытаюсь придумать способ нацеливания и сохранить эти элементы в соответствии с их исходным положением, не взломав каждый плагин, если это возможно ,

Ниже приведен пример проблемы, в которой я использовал бутстрап datepicker. Нажмите на вкладку datepicker spawn, а затем прокрутите и обратите внимание, что datepicker остается относительно экрана, а не входным.

Ссылка на JSFiddle: http://jsfiddle.net/GuJR6/1/

Спасибо!

.container { 
    margin-top: 15px; 
    height:400px; 
    overflow-y: scroll; 
} 
.scrolling-content { 
    height:1000px; 
} 

<div class="container"> 
    <div class="scrolling-content"> 
     <div class="well text-center"> 
      <input type="text" class="datetimepicker" readonly> 
     </div> 
    </div> 
</div> 

$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'}); 

Answer 1

Я просто forked bootstrap-datetimepicker и добавил container вариант упоминания Яна Peapke. Вы можете использовать его как это:

$(selector).datetimepicker({ container: nativeDOMElement }); 
$(selector).datetimepicker({ container: jQueryObject }); 
$(selector).datetimepicker({ container: jQuerySelector }); 

Это позволяет решить проблему:

В вашем CSS:

.scrolling-content { 
    position: relative; 
} 

Сравнить: CSS-Tricks

JS

$(".datetimepicker").datetimepicker({ 
     format: 'yyyy-mm-dd hh:ii', 
     container: '.scrolling-content' 
    }); 

Fiddle

http://jsfiddle.net/marionebl/GuJR6/2/

Первый вход в скрипке применяется объясняемое исправление для выпуска. Второй должен вести себя как раньше.

запрос Связанные тянуть

https://github.com/smalot/bootstrap-datetimepicker/pull/215

Answer 2

Я боюсь, что проблема связана с самим бутстрапом datetimepicker.
Вместо прикрепления к такому же контейнеру, что и вход, он прикреплен к корпусу.

Я искал документацию, чтобы узнать, есть ли возможность установить родителя, но я боюсь, что нет.

В качестве решения вы можете попробовать другой каркас, например jQueryUI или this plugin.

Вы также можете попытаться исправить положение сборщика вручную, добавив обработчик кликов в поле ввода, который удаляет датупик из тела, добавляет его к содержимому конвейера прокрутки и использует координаты мыши событий для его размещения правильно внутри контейнера. Хотя, похоже, много хлопот. :)

С уважением, J

Answer 3

Даже я был перед этим вопросом. Обнаружил решение этого вопроса, добавив var t;

$('YOURCLASSNAME').on('scroll', function() { 
     var $this = $('.input-group.date'); 
     window.clearTimeout(t); 
     t = window.setTimeout(function() { 
      $this.datepicker('place'); 
     }, 50) 
    }); 

Добавьте выше кода после if (showFocus) this.show(); в этом блоке вар DatePicker = функция (элемент, опции) {....} из самозагрузки-datepicker.js плагин

Answer 4

$('YOURCLASSNAME').on('scroll', function() { 
     var $this = $('.input-group.date'); 
     $this.datepicker('place'); 
    }); 

Добавить выше код до

Datepicker.prototype = {...} 

Это решение. и отлично работает на всех устройствах и размерах экрана.