Question

我做了pen来模拟这个问题。

＆＃13;

function createBox() {
  var box = document.createElement("div");
  box.className = "box";
  box.style.backgroundColor = "#"+((1<<24)*Math.random()|0).toString(16);
  
  return box;
}

function prependInnerHTML() {
  console.log('prependInnerHTML'); 
  var element = document.getElementById('scroll');
  var box = createBox();
  element.innerHTML = box.outerHTML + element.innerHTML;
  element.prepend(box);
}

function prependPrepend() {
  console.log('prependPrepend'); 
  var element = document.getElementById('scroll');
  var box = createBox();
  element.prepend(box);
}

function prependPrepend() {
  console.log('prependPrepend'); 
  var element = document.getElementById('scroll');
  var box = createBox();
  element.prepend(box);
}

function prependInsertBefore() {
  console.log('prependInsertBefore'); 
  var element = document.getElementById('scroll');
  var box = createBox();
  element.insertBefore(box, element.firstChild);
}

function scroll() {
  console.log('scroll');
  var detailElement = document.getElementById('details');
  var scrollElement = document.getElementById('scroll');
  
  detailElement.innerHTML = "ScrollTop: " + scrollElement.scrollTop;
}

function clearScrollElement() {
  console.log('clear');
  var element = document.getElementById('scroll');
    while(element.firstChild){
      element.removeChild(element.firstChild);
  }
}

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%
}
#details {
  position: fixed;
  top: 10px;
  left: 20px;
  background-color: white;
}
#options {
  position: fixed;
  top: 10px;
  right: 20px;
  background-color: white;
}
#scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}
.box {
  height: 100vh;
  width: 100%
}

＆＃13;

<div id="options">
  <span onclick="prependInnerHTML()">InnerHTML</span>
  <span onclick="prependInsertBefore()">InsertBefore</span>
  <span onclick="prependPrepend()">Prepend</span>
  <span onclick="clearScrollElement()">Clear</span>
</div>

<div id="details">
  ScrollTop: 0
</div>

<div id="scroll" onscroll="scroll()"></div>

＆＃13;

问题在于，当一个元素被添加到可滚动元素之前时，它将在不同的浏览器中具有不同的行为。

的innerHTML：

第一个prepend方法是更改可滚动元素的innerHTML。这似乎在多个浏览器中保持一致。

问题是像Vue这样的框架在内部不使用这种方法，它可能使用其他方法之一。

在Chrome浏览器中插入：

如果scrollTop为0，我们前置scrollTop保持为零。如果scrollTop高于零，它将调整scrollTop以包含前置元素的高度。

使用IE / Edge / Firefox

InsertBefore：

与innerHTML相同的行为。

前置：

在IE / Edge上似乎不支持Prepend，所以我会跳过那个。

问题：

如何在不引入各种浏览器检查的情况下使InsertBefore在所有浏览器中的行为相同？

Answer 1

尝试这样做

/**
 * Adds a new element to the top of the container, If after is a valid element then the new element is added after that element
 * @param {HTMLElement} newItem - newItem to be added
 * @param {HTMLElement} container - container
 * @param {HTMLElement} [after=] - optional parameter, states that the new item will be added after this element
 * @returns {HTMLElement}
 */
function addElementToTop(newItem, container, after) {
    if (after instanceof HTMLElement === false || after.parentElement !== container) {
        var first = container.firstElementChild;
    } else {
        first = after.nextElementSibling;
    }
    if (first !== null) {
        container.insertBefore(newItem, first);
    } else {
        container.appendChild(newItem);
    }
    return newItem;
}

这是简单的版本

function addElementToTop(newItem, container) {
    var first = container.firstElementChild;
    if (first) container.insertBefore(newItem, first);
    else container.appendChild(newItem);
    return newItem;
}

以下版本维护相同的视口，但滚动更改

function addElementToTopSteadyScroll(newItem, container) {
    var bot = container.scrollHeight - container.scrollTop;
    var first = container.firstElementChild;
    if (first) container.insertBefore(newItem, first);
    else container.appendChild(newItem);
    container.scrollTop = container.scrollHeight - bot;
    return newItem;
}

以下版本保持相同的滚动但视口改变

function addElementToTopFlowScroll(newItem, container) {
    var top = container.scrollTop;
    var first = container.firstElementChild;
    if (first) container.insertBefore(newItem, first);
    else container.appendChild(newItem);
    container.scrollTop = top;
    return newItem;
}

跨浏览器的一致滚动行为

1 个答案: