全日历窗口自动向上滚动

Question

I've got an issue with creating new events. In Chrome for example, scroll down the to the bottom, make sure it's height is small enough, so you cannot see the whole calendar.

Click buttons month , then week , then month , week (several times). Now try to create an event today at 11pm - a modal window will appear. Press Cancel.

What I get now and what is wrong - browser window is scrolled up, until the Title of the calendar!

As you see - there is no my own libraries included, only basic code from fullcalendar/semantic-ui documentation.

The issue doesn't happen with Semantic-ui modal window itself (without fullcalendar). Moreover, just after a page refresh everything is Ok, but then pressing month/week/month/week enables this scrolling up.

 $(document).ready(function() { $('#calendar').fullCalendar({ header: { right: 'month,agendaWeek' }, aspectRatio: 1.8, selectable: true, select: function() { $('.ui.modal').modal('show'); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css"> <script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script> <script type="text/javascript" src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css"> <div style="height:1000px;"></div> <div id="calendar"></div> <div class="ui small modal"> <div class="actions"> <div class="ui black cancel button">Cancel</div> </div> </div>

JSFiddle example: https://jsfiddle.net/edomzxLL/1/

Please help me to understand what's wrong and how to prevent this strange/unneeded scrolling up?

---

EDIT:

At the moment I think it's done by a modal window. There is a code, which runs when window closes:

...
onComplete : function() {
  settings.onHidden.call(element);
  module.restore.focus();
  callback();
}
...

... onHidden() is fired and then focus returns to the last focused object. That's an issue. If I have a focused element somewhere in the beginning of a webpage, then scroll down, show a modal window and close it - browser is automatically scrolling up to the beginning of the page to that focused element. Commenting out this line helps me, but this is editing a Semantic source code, which is not a solution. In my case probably button gets a focus.

Answer 1

 const calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
  headerToolbar: { left: 'prev,next', center: 'title', right: '' },
  initialView: calendarView,
  eventDurationEditable: true,
  slotDuration: `00:${duracaoMinimaConsulta}`,
  locale: 'pt-br',
  navLinks: true,
  editable: true,
  dayMaxEvents: true,
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  eventResize: handleResizeEvent,
  eventDrop: handleDropEvent,
  **scrollTime: scrollTime, (Set this property)** Ex.: scrollTime: "20:00"
  events: eventosState,
});

Answer 2

将scrollTimeReset道具设置为false ： https : scrollTimeReset

Answer 3

I really don't understand the issue.

The first div in your document has a height of 1000px so obviously the rest of the document flows down.

When you open your modal it has a height and width of 100 % so scrolling up is disabled.