Permítanme comenzar diciendo que soy relativamente verde con respecto a JavaScript. Sin embargo, estoy tratando de crear una función de JavaScript que escuche un evento de rueda, determine la dirección del desplazamiento y desplace la siguiente parte de la página a la vista. Similar a un gesto de deslizamiento. Lo tengo funcionando en Firefox según lo previsto, el usuario se desplaza hacia abajo, la página se mueve hacia abajo, hacia arriba, la página se mueve hacia arriba. Sin embargo, en Chrome y Edge, parece que se llama a la función element.scrollIntoView() , pero no sucede nada.
Estoy usando Blazor con JSInterop para que la página se desplace.
Aquí está la esencia del archivo:
// scrolldetection.js // window.scrolldetection { scrollSetup: function (elementId) { autoscroller(elementId); } } function autoscroller(elementId) { // Set up vars var idList = document.getElementById(elementId).children.id; var idListIndex = // Gets current index based on current location on page var curDirection; document.addEventListener("wheel", function () { var currentPos = window.scrollY; if (!curDirection) { // Check for what direction user scrolls idListIndex = // Function that determines new index scrollScreen(idList, idListIndex); } var timerId = setTimeout(function () { curDirection = undefined; clearTimeout(timerId); }, 700); } } function scrollScreen(idList, curIndex) { console.log("list index: " + curIndex); element = document.getElementById(idList[curIndex]); console.log(element.id); element.scrollIntoView({ behavior: 'smooth' }); } Tengo otra función que llama a scrollIntoView() en los mismos elementos, presionando un botón. Funciona bien.
Aquí está esa función:
// anchorlink.js // This one works as intended // window.anchorlink = { scrollIntoView: function (elementId) { var elem = document.getElementById(elementId); if (elem) { elem.scrollIntoView({ behavior: 'smooth' }); } } } Las llamadas a console.log( console.log() dentro de la función scrollScreen() se muestran correctamente en la consola de cada navegador. Lo que me lleva a creer que se está llamando a element.scrollIntoView() , pero algo va mal para que no funcione correctamente. Si hay alguna otra información que necesita, estaré encantado de proporcionar, gracias.
Después de trabajar en esto un poco más, decidí que el concepto que estaba usando no era tan fácil de usar como esperaba.
Decidí dejar que el usuario se desplazara libremente por la página y, cuando dejara de desplazarse, determinara el elemento DOM más cercano y se desplazara hasta él. Funciona en Edge, Chrome y Firefox.
window.contentcenter = { contentCenter: function (elementId) { var centeringFunction = debounce(function () { autocenter(elementId) }, 200); document.addEventListener("scroll", centeringFunction); } } function autocenter(elementId) { var currentElement = detectCurrentElement(elementId); currentElement.scrollIntoView({ behavior: "smooth" }); } function detectCurrentElement(elementId) { var element = document.getElementById(elementId); var currentPos = window.scrollY; var contentIdList = getContentIdList(elementId); var currentElement = closestContent(currentPos, element, contentIdList); return currentElement; } function closestContent(pos, element, contentIdList) { var contentId = Math.round(pos / (element.offsetHeight / contentIdList.length)); var currentElement = document.getElementById(contentIdList[contentId]); return currentElement; } function getContentIdList(elementId) { var idList = [] var childElements = document.getElementById(elementId).children; for (var i = 0; i < childElements.length; i++) { idList.push(childElements[i].id); } return idList; } function debounce(func, timeout) { var timer; return function () { var context = this, args = arguments; var later = function () { timer = null; func.apply(context, args); }; clearTimeout(timer); timer = setTimeout(later, timeout) }; }