Question

我在创建新活动时遇到了问题。例如，在Chrome中，向下滚动到底部，确保它的高度足够小，因此您无法看到整个日历。

点击按钮月，然后周，然后月，周（多次）。现在尝试在今天晚上11点创建一个活动 - 将出现一个模态窗口。按取消。

我现在得到什么以及出了什么问题 - 浏览器窗口向上滚动，直到日历的标题！

如您所见 - 没有我自己的库，只有来自fullcalendar / semantic-ui文档的基本代码。

Semantic-ui模态窗口本身（没有fullcalendar）不会发生这个问题。此外，在页面刷新之后，一切都很好，但是按月/周/月/周可以实现向上滚动。

＆＃13;

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

＆＃13;

<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>

＆＃13;

JSFiddle示例：https://jsfiddle.net/edomzxLL/1/

请帮助我了解错误以及如何防止这种奇怪/不必要的向上滚动？

修改

目前我认为它是由模态窗口完成的。有一个代码，在窗口关闭时运行：

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

触发

... onHidden（），然后焦点返回到最后一个焦点对象。这是一个问题。如果我在网页的开头某处有一个聚焦元素，然后向下滚动，显示一个模态窗口并关闭它 - 浏览器会自动向上滚动到该聚焦元素的页面开头。评论这一行有助于我，但这是编辑语义源代码，这不是一个解决方案。在我的情况下，按钮可能会成为焦点。

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

我真的不明白这个问题。

文档中的第一个div的高度为1000px，因此文档的其余部分显然会向下流动。

打开模态时，它的高度和宽度均为100％，因此禁用向上滚动。

Fullcalendar窗口自动向上滚动

2 个答案: