Я использую scrollama.js .
scrollama - это плагин, который позволяет центрировать контрольные линии с помощью Intersection Observer.
Что я хочу сделать
Теперь (по умолчанию), я получаю центр на основе 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 }); }
}
результат:
На данный момент я могу получить #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;
});
}
}