Fullcalendar 窗口自动向上滚动

Posted 2023-02-19

【中文标题】Fullcalendar 窗口自动向上滚动

【英文标题】：Fullcalendar window is automatically scrolling up

【发布时间】：2018-08-02 05:12:23

【问题描述】：

我在创建新事件时遇到了问题。例如在 Chrome 中，向下滚动到底部，确保它的高度足够小，这样您就看不到整个日历。

点击按钮month、week、month、week（多次）。现在尝试在今天晚上 11 点创建一个事件 - 将出现一个模式窗口。按取消。

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

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

Semantic-ui 模态窗口本身（没有完整日历）不会发生此问题。此外，在页面刷新后一切正常，但随后按月/周/月/周可以向上滚动。

$(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 示例：https://jsfiddle.net/edomzxLL/1/

请帮助我了解问题所在以及如何防止这种奇怪/不需要的向上滚动？

---

编辑：

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

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

...

... onHidden() 被触发，然后焦点返回到最后一个焦点对象。那是个问题。如果我在网页开头的某处有一个焦点元素，则向下滚动，显示一个模式窗口并关闭它 - 浏览器会自动向上滚动到页面的开头到该焦点元素。注释掉这一行对我有帮助，但这是编辑语义源代码，这不是解决方案。就我而言，按钮可能获得焦点。

【问题讨论】：

总是欢迎使用小提琴，但请确保在问题中也包含相关代码。如果 jsFiddle 出现故障（经常这样），您的问题将无法回答，并且对任何未来的访问者都无用。

你的 sn-p 不适合我。你能提供一个可行的例子吗？

@AlexanderTyapkov，根本不工作或没有自动向上滚动？它适用于我尝试的任何地方。您是否先将窗口滚动到底部？窗口的高度是否足够小，以至于您看不到整个日历？您是否多次按下月/周/月/周按钮？最后一个问题非常重要。只有在这些操作之后才尝试创建事件

@Alexey 好的，我尝试按照您的情况进行操作。当我创建事件并单击取消时，窗口不会向上滚动。 （Firefox 58，Ubuntu）可能是浏览器特有的问题？

@AlexanderTyapkov，在 Firefox 中我有类似的问题。尝试使用 Win 10 的 VM - 与 MS Edge 相同

【参考方案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,
);

【讨论】：

HI :) 欢迎您测试过这个吗？

是的。我在 React 项目 @WurmD 上使用 FullCalendar。

【参考方案2】：

将scrollTimeReset 属性设置为false： https://fullcalendar.io/docs/scrollTimeReset

【参考方案3】：

我真的不明白这个问题。

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

当您打开模式时，它的高度和宽度为 100 %，因此向上滚动被禁用。

【讨论】：

这似乎更像是一个评论而不是一个答案。

@Enrico，问题不在于模式窗口打开时禁用滚动，而是 自动 关闭时向上滚动

额外的 1000px 高度的 div 是为了更容易看到这个向上滚动

它不会在我的设备上向上滚动（Win 10 - Chrome Canary）。当模式关闭时，日历仍然位于原来的位置。我尝试在周标签中添加事件，从几个月切换到几周，等等，它总是保持不变。

它适用于我，Linux + Chromium/Firefox。您是否先将窗口滚动到底部？窗口的高度是否足够小，以至于您看不到整个日历？您是否多次按下月/周/月/周按钮？最后一个问题非常重要。只有在这些操作之后才尝试创建事件