Question

我有一个搜索输入文字，我想在加载页面时应用focus()，问题是focus功能会自动滚动到此字段。任何禁用此滚动的解决方案？

<input id="search_terms" type="text" />
<script>
    document.getelementbyId('search-terms').focus();
</script>

Answer 1

这是一个完整的解决方案：

var cursorFocus = function(elem) {
  var x = window.scrollX, y = window.scrollY;
  elem.focus();
  window.scrollTo(x, y);
}

cursorFocus(document.getElementById('search-terms'));

Answer 2

有一个新的WHATWG standard，允许您将对象传递给focus()，指定您要阻止浏览器将元素滚动到视图中：

const element = document.getElementById('search-terms')

element.focus({
  preventScroll: true
});

自Chrome 64和Edge Insider Preview build 17046以来一直受到支持，并且应该在Firefox 68登陆 - web-platform-tests here上有支持矩阵。

Answer 3

如果您使用的是jQuery，您也可以这样做：

$.fn.focusWithoutScrolling = function(){
  var x = window.scrollX, y = window.scrollY;
  this.focus();
  window.scrollTo(x, y);
};

然后

$('#search_terms').focusWithoutScrolling();

Answer 4

支持更多浏览器的一点修改版本（包括IE9）

var cursorFocus = function(elem) {
  var x, y;
  // More sources for scroll x, y offset.
  if (typeof(window.pageXOffset) !== 'undefined') {
      x = window.pageXOffset;
      y = window.pageYOffset;
  } else if (typeof(window.scrollX) !== 'undefined') {
      x = window.scrollX;
      y = window.scrollY;
  } else if (document.documentElement && typeof(document.documentElement.scrollLeft) !== 'undefined') {
      x = document.documentElement.scrollLeft;
      y = document.documentElement.scrollTop;
  } else {
      x = document.body.scrollLeft;
      y = document.body.scrollTop;
  }

  elem.focus();

  if (typeof x !== 'undefined') {
      // In some cases IE9 does not seem to catch instant scrollTo request.
      setTimeout(function() { window.scrollTo(x, y); }, 100);
  }
}

Answer 5

这里的答案不是在整个层次结构上滚动，而只是在主滚动条上滚动。这个答案将照顾一切：

    var focusWithoutScrolling = function (el) {
        var scrollHierarchy = [];

        var parent = el.parentNode;
        while (parent) {
            scrollHierarchy.push([parent, parent.scrollLeft, parent.scrollTop]);
            parent = parent.parentNode;
        }

        el.focus();

        scrollHierarchy.forEach(function (item) {
            var el = item[0];

            // Check first to avoid triggering unnecessary `scroll` events

            if (el.scrollLeft != item[1])
                el.scrollLeft = item[1];

            if (el.scrollTop != item[2])
                el.scrollTop = item[2];
        });
    };

Answer 6

我有一个类似的问题使我发疯。通过使用jQuery，我发现了一种解决方案，即发现鼠标和输入的坐标，然后滚动到它们之间的差异。在您的情况下，可能是这样的：

  document.addEventListener("mousemove", (e) => {
    mouseCoords = { x: e.clientX, y: e.clientY };
  });

  $('#search_terms').bind("focus", function (e) {
      var offset = e.offset();
      window.scrollTo(
        offset.left - mouseCoords.x,
        offset.top - mouseCoords.y
      );
  });

Answer 7

截至今天，在页面加载时设置焦点元素的首选方法是使用autofocus属性。这不涉及任何滚动。

＆＃13;

<input id="search_terms" type="text" autofocus />

＆＃13;

autofocus attrubute is part of the HTML5 standard并得到所有主流浏览器的支持，唯一明显的例外是Internet Explorer 9或更早版本。

focus（）输入而不滚动

7 个答案: