Я использую timepicker. js библиотека, чтобы выбрать время. При щелчке ввода рядом с полем ввода должен отображаться таймер. Это работает как ожидалось, если вход находится в главном представлении документа. Если вход расположен ниже (нам нужно прокрутить, чтобы увидеть его), и мы щелкаем по нему, указатель времени отображается более высоко на главной странице просмотра.
Ожидаемое поведение: 
Поведение для входов после прокрутки ниже: 
Я бы хотел, чтобы указатель времени был рядом с полем ввода и во втором случае, как и в первом случае.
index. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="time1" placeholder="Time" />
<div style="height: 70rem;"></div>
<input type="text" id="time2" placeholder="Time" value="18:00" />
<div style="height: 70rem;"></div>
</body>
<link
href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<script src="./index.js"></script>
</html>
index. js:
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
var timepicker = new TimePicker(["time1", "time2"], {
lang: "en"
});
timepicker.on("change", function(evt) {
var value = (evt.hour || "00") + ":" + (evt.minute || "00");
evt.element.value = value;
});