Почему я не могу получить центр? в JavaScript - PullRequest
1 голос
/ 11 апреля 2019

Я использую scrollama.js .
scrollama - это плагин, который позволяет центрировать контрольные линии с помощью Intersection Observer.


Что я хочу сделать

like this

Теперь (по умолчанию), я получаю центр на основе body,
Я хочу получить центр на основе конкретного элемента #cont (= контент).

И я изменил код scrollama.js следующим образом.


Текущий статус

Строка 213

function handleResize() {
    // viewH = window.innerHeight;
    // pageH = getPageHeight();
    viewH = document.getElementById("cont").offsetHeight;  // change
    pageH = document.getElementById("cont").offsetHeight;  // change

    offsetMargin = offsetVal * viewH;

    if (isReady) {
      stepOffsetHeight = stepEl.map(function (el) { return el.offsetHeight; });
      stepOffsetTop = stepEl.map(getOffsetTop);
      if (isEnabled) { updateIO(); }
    }

    if (isDebug) { update({ id: id, stepOffsetHeight: stepOffsetHeight, offsetMargin: offsetMargin, offsetVal: offsetVal }); }
  }

результат:
current

На данный момент я могу получить #cont, но контрольная линия находится сверху .. (Эта пунктирная линия является инструментом отладки для скроллама)

Я думал, что это займет центр, если я изменил элемент scrollama.js и изменил его следующим образом, но есть ли что-то еще, что я должен изменить?


Код, который может иметь отношение к центру

Я извлек все места, где viewH и pageH используются в скролламе.

function scrollama() {

//【Line 143~】
var viewH = 0;
var pageH = 0;

//【Line 213~】
  function handleResize() {
    viewH = window.innerHeight;
    pageH = getPageHeight();

    offsetMargin = offsetVal * viewH;
  }

//【Line 471~】
// jump into viewport
  function updateViewportAboveIO() {
    io.viewportAbove = stepEl.map(function (el, i) {
      var marginTop = pageH - stepOffsetTop[i];    // <- here
      var marginBottom = offsetMargin - viewH - stepOffsetHeight[i];    // <- here
      var rootMargin = marginTop + "px 0px " + marginBottom + "px 0px";
      var options = { rootMargin: rootMargin };
      // console.log(options);
      var obs = new IntersectionObserver(intersectViewportAbove, options);
      obs.observe(el);
      return obs;
    });
  }

  function updateViewportBelowIO() {
    io.viewportBelow = stepEl.map(function (el, i) {
      var marginTop = -offsetMargin - stepOffsetHeight[i];
      var marginBottom = offsetMargin - viewH + stepOffsetHeight[i] + pageH; // <- here
      var rootMargin = marginTop + "px 0px " + marginBottom + "px 0px";
      var options = { rootMargin: rootMargin };
      // console.log(options);
      var obs = new IntersectionObserver(intersectViewportBelow, options);
      obs.observe(el);
      return obs;
    });
  }

  // look above for intersection
  function updateStepAboveIO() {
    io.stepAbove = stepEl.map(function (el, i) {
      var marginTop = -offsetMargin + stepOffsetHeight[i];
      var marginBottom = offsetMargin - viewH;    // <- here
      var rootMargin = marginTop + "px 0px " + marginBottom + "px 0px";
      var options = { rootMargin: rootMargin };
      // console.log(options);
      var obs = new IntersectionObserver(intersectStepAbove, options);
      obs.observe(el);
      return obs;
    });
  }

  // look below for intersection
  function updateStepBelowIO() {
    io.stepAbove = stepEl.map(function (el, i) {
      var marginTop = -offsetMargin;
      var marginBottom = offsetMargin - viewH + stepOffsetHeight[i];    // <- here
      var rootMargin = marginTop + "px 0px " + marginBottom + "px 0px";
      var options = { rootMargin: rootMargin };
      // console.log(options);
      var obs = new IntersectionObserver(intersectStepBelow, options);
      obs.observe(el);
      return obs;
    });
  }

  // progress progress tracker
  function updateStepProgressIO() {
    io.stepProgress = stepEl.map(function (el, i) {
      var marginTop = stepOffsetHeight[i] - offsetMargin;
      var marginBottom = -viewH + offsetMargin;    // <- here
      var rootMargin = marginTop + "px 0px " + marginBottom + "px 0px";
      var threshold = createThreshold(stepOffsetHeight[i]);
      var options = { rootMargin: rootMargin, threshold: threshold };
      // console.log(options);
      var obs = new IntersectionObserver(intersectStepProgress, options);
      obs.observe(el);
      return obs;
    });
  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...