javascript - 试图避免在ajaxcall之后滚动条返回开始

Question

我正在使用 FullCalendar，但是当我使用 Ajax 更新作为格式条件的事件的状态时，当我横向滚动调用 ajax 时，滚动条重置为开始，防止查看者站在他想要可视化的位置.

我尝试为包含 Calendar 类的 div 设置固定宽度，没有结果可能我没有设置正确

function ajaxcall1(calendar) {
  $.ajax({
    type: 'GET',
    url: "call for API",
    success: function(doc) {
      successAjax(doc, calendar);
    },
    error: function() {
      console.log("error");
    }
  }).done(function() {
    window.setTimeout(function() {
      ajaxcall2(calendar);
    }, 4000);
  });
}

function ajaxcall2(calendar) {
  $.ajax({
    type: 'GET',
    url: "call for API",
    success: function(doc) {
      successAjax(doc, calendar);
    },
    error: function() {
      console.log("error");
    }
  }).done(function() {
    window.setTimeout(function() {
      ajaxcall1(calendar);
    }, 4000);
  });
}

$(document).ready(function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    plugins: ['interaction', 'resourceTimeGrid'],
    resourceGroupField: 'group',
    defaultView: 'resourceTimeGridDay',
    displayEventTime: false,
    slotEventOverlap: false,
    height: 700,
    scrollTime: starthour,
    resourceGroupField: 'groupId',
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute: false,
      meridiem: 'short',
      hour12: false
    },
    resources: [{
      id: '1',
      title: 'R16/MOTORES',
      groupId: 'P16'
    }, {
      id: '2',
      title: 'R19/TRANSMISSÃO',
      groupId: 'P19'
    }, {
      id: '3',
      title: 'R26/CHASSIS',
      groupId: 'P26'
    }, {
      id: '4',
      title: 'R27/CHASSIS',
      groupId: 'P27'
    }, {
      id: '5',
      title: 'R40/CABINAS 1',
      groupId: 'p40'
    }, {
      id: '6',
      title: 'R54/CABINAS 2',
      groupId: 'p54'
    }, {
      id: '7',
      title: 'R56/KD',
      groupId: 'P56'
    }, {
      id: '8',
      title: 'TRUCK ON WHEELS',
      groupId: 'P56'
    }],
    nowIndicator: true,
    timeFormat: 'H:mm'
  });

  calendar.render();
  ajaxcall1(calendar);
})

`enter code here`.fc-time-grid .fc-slats td {
    height: 3.4em;
}

.fc-title {
    font-size: 15px;
}

#erro {
    background-color: #FF0000;
}

body {
    margin: 40px 10px;
    padding: 0;
    font-size: 14px;
    min-height: 100%;
}

#backDiv {
    background-size: 100% 120%;
    background-color: #FAFAFA;
    background-position: center;
    position: fixed;
    opacity: 0;
    height: 100%;
    width: 100%;
    top: 50px;
    left: 0;
    opacity: 1;
    z-index: -1;
}
#erro {
    background-color: #FF0000;
}


#warning {
    background-color: #D6001C;
    pointer-events: none;
    position: fixed;
    opacity: 0;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
    opacity: 0.5;
    z-index: 900 !important;
}
.fc table {
    table-layout: auto;
}

.fc-view > table {
    min-width: 0;
    width: auto;
}

.fc-axis {
    min-width: 70px; /*the width of times column*/
    width: 70px; /*the width of times column*/
}

.fc-day, .fc-resource-cell, .fc-content-col, .data-resource-id {
    min-width: 300px;
    width: 300px;
}

successAjax() 的代码

enter code here函数successAjax（文档，日历）{

        allEvents = [];
        $(doc).each(function (idata) {
         $(location).each(function (iloc) {

                if (location[iloc] == "R16") {
                    allEvents.push({
                        id: idata,
                        resourceId: '1',
                        title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
                        start: doc[idata].EDA,
                        end: dt,
                        allday: false,
                        backgroundColor: '#041E42',
                        textColor: '#FAFAFA',
                        arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
                        entry: doc[idata].PRU_GATE_ENTRY_DATE,
                        departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
                        trailerId: doc[idata].TRAILER_ID,
                        description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
                        hour: catchHour
                    });
                } else if (location[iloc] == "R19") {
                    allEvents.push({
                        id: idata,
                        resourceId: '2',
                        title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
                        start: doc[idata].EDA,
                        end: dt,
                        allday: false,
                        backgroundColor: '#041E42',
                        textColor: '#FAFAFA',
                        arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
                        entry: doc[idata].PRU_GATE_ENTRY_DATE,
                        departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
                        trailerId: doc[idata].TRAILER_ID,
                        description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
                        hour: catchHour
                    });
                } else if (location[iloc] == "R26") {
                    allEvents.push({
                        id: idata,
                        resourceId: '3',
                        title: doc[idata].CARRIER_CODE_FOR_DISPLAY + " - " + licenseplate + "\n" + "Entry: " + entrada + "\n" + " - MUs: " + doc[idata].QuantityInside,
                        start: doc[idata].EDA,
                        end: dt,
                        allday: false,
                        backgroundColor: '#041E42',
                        textColor: '#FAFAFA',
                        arrival: doc[idata].PRU_GATE_ARRIVAL_DATE,
                        entry: doc[idata].PRU_GATE_ENTRY_DATE,
                        departure: doc[idata].PRU_GATE_DEPARTURE_DATE,
                        trailerId: doc[idata].TRAILER_ID,
                        description: doc[idata].CARRIER_CODE_FOR_DISPLAY,
                        hour: catchHour
                    });
                    ... Input of Events via API
                    try {

            calendar.getEventSources()[0].remove();

        } catch (err)
        {

        }

        calendar.addEventSource(allEvents);

其余的是改变事件颜色并在特定小时内重新定位多余事件的逻辑

标签： javascriptjqueryajaxfullcalendarfullcalendar-4