请使用visibility: hidden;或类似的类：

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

或者（来自样板文件）：

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

display: none;的内容在页面上没有位置，您可能已经知道了。
Check out this article on the subject.

如果您的目标只是将scrollLeft和scrollTop设置为0（因为这是我的目标），一个非常笨拙的解决方案是按照以下步骤操作：

• 获取对要重置的元素的引用。
• 获取对元素父级的引用。
• 从父代中移除元素。
• 将元素追加回父级。

scrollTop和scrollLeft现在将设置回0，即使它们不可见。

function resetScroll(element) {
    element.parentElement.replaceChild(element,element)
}

这会将scrollTop和scrollLeft都设置为0，即使不显示任何内容。
使用示例：

resetScroll(document.getElementById("my_scroll"))

这并不理想，但我解决这个问题的方法是添加一个一次性的IntersectionObserver，它在元素第一次变为可见时触发。

function onVisible(element, callback) {
  new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.intersectionRatio > 0) {
        callback(element);
        observer.disconnect();
      }
    });
  }).observe(element);
}

并像这样使用它：

let myElement = document.querySelector("#myElement");
// When the element first becomes visible, scroll it to 500px:
onVisible(myElement, el=>el.scrollTop=500);

示例：https://jsbin.com/gigumewemo/edit?html,output