window scrollIntoView doesn't work for safari and ipads. To resolve this issue, i have created a polyfill function following polyfill custom scroll. Following is the code i have written for this polyfill function for scroll. it is working fine for the blog that i have shared above but this is not working in my code as the flow of the code and usage is same but still no luck.
function scroll(element) {
let start = null;
const target = element && element ? element.getBoundingClientRect().top : 0;
const firstPos = window.pageYOffset || document.documentElement.scrollTop;
let pos = 0;
(function () {
const browser = ['ms', 'moz', 'webkit', 'o'];
for (let x = 0, { length } = browser; x < length && !window.requestAnimationFrame; x++) {
window.requestAnimFrame = (function () {
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| function (callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
window.cancelAnimationFrame = window[`${browser[x]}CancelAnimationFrame`]
|| window[`${browser[x]}CancelRequestAnimationFrame`];
}
}());
function showAnimation(timestamp) {
if (!start) { start = timestamp || new Date().getTime(); }
const elapsed = timestamp - start;
const progress = elapsed / 100;
const outQuad = function (n) {
return n * (2 - n);
};
const easeInPercentage = +(outQuad(progress)).toFixed(2);
console.log(easeInPercentage)
pos = (target === 0) ? (firstPos - (firstPos * easeInPercentage)) : (firstPos + (target * easeInPercentage));
window.scrollTo(0, pos);
if (target !== 0 && pos >= (firstPos + target) || target === 0 && pos <= 0) {
cancelAnimationFrame(start);
if (element) {
element.setAttribute('tabindex', -1);
element.focus();
}
pos = 0;
} else {
window.requestAnimationFrame(showAnimation);
}
}
window.requestAnimationFrame(showAnimation);
}
document.getElementById('seemorebutton')?.addEventListener('click', (e) => {
e.preventDefault();
scroll(document.getElementById('discoverEvents'));
});