Chrome 上的后退按钮未触发 JS

Question

我有一个水平滚动的网站，您可以通过单击并拖动光标来拖动它。加载时，页面应加载到滚动的中间，您可以左右拖动它。

刷新时可以工作，但如果你转到另一个页面并按回，“滚动中间的 onLoad”JS 不起作用，单击并拖动 JS 也不起作用。

尝试添加卸载处理程序，但没有成功。有什么想法吗？

// reload page to trigger JS after pressing back button
// firefox
function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); }
window.addEventListener('unload', UnloadHandler, false);

//safari
window.addEventListener('pageshow', function (event) {
    if (event.persisted) {
        window.location.reload() 
    }
}, false);


// scroll to middle onLoad (horizontal, vertical)
document.querySelector('.home-container').scrollLeft = (document.querySelector('.home-container').scrollWidth - document.querySelector('.home-container').clientWidth) / 2


// enable click and drag

const slider = document.querySelector('.home-container');
let mouseDown = false;
let startX, scrollLeft;

let startDragging = function (e) {
  mouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
};
let stopDragging = function (event) {
  mouseDown = false;
};

slider.addEventListener('mousemove', (e) => {
  e.preventDefault();
  if(!mouseDown) { return; }
  const x = e.pageX - slider.offsetLeft;
  const scroll = x - startX;
  slider.scrollLeft = scrollLeft - scroll;
});

// Add the event listeners
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);

Answer 1

这是我在 Windows 11 中的最新 chrome 中运行它时遇到的错误：

{
  "message": "Uncaught TypeError: Cannot read properties of null (reading 'scrollWidth')",
  "filename": "https://stacksnippets.net/js",
  "lineno": 26,
  "colno": 98
}

我认为错误来自这一行：

document.querySelector('.home-container').scrollLeft = (document.querySelector('.home-container').scrollWidth - document.querySelector('.home-container').clientWidth) / 2

特别是这部分：

document.querySelector('.home-container').scrollWidth 

我相信

querySelector

在 HTML 中没有找到该描述的元素，因此返回

null

。因此，当您尝试获取其

scrollWidth

时，您会收到错误。

Answer 2

我也有同样的问题。窗口对象的 pageshow 事件对我来说效果很好。

window.addEventListener("pageshow",()=>{
//some logic
}