如何隔离或捕获对 ScrollIntoView 的调用

Question

我们的团队正在处理大型企业网站上在线应用程序中的一个小错误。

客户点击 Next to go 进入下一个部分，但没有下一个 URL - 所有都在同一个 web 地址上处理。

错误是：在其中一个“页面”上，客户单击“下一步”，下一页上的焦点转到底部控件之一。 我不知道哪个控件 - 但它通过使页面将焦点滚动到表单底部来绕过必填字段。 我是我们团队中唯一的软件开发人员，我的背景是 Windows Forms。

在代码中，VS Code 发现了几个附加到基本控件的ScrollIntoView实例。 断点是无用的，因为必须将代码部署到测试服务器才能看到结果。

通过在 javascript 中使用鼠标单击事件中的浏览器断点，我能够进入一段代码，该代码段显示为return Promise.resolve(config); - 这是那个文件：

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

import { getAccessToken } from 'bank-authentication';
import BankLogger from 'bank-logger';

var AuthenticationRequestInterceptor = /*#__PURE__*/function () {
  function AuthenticationRequestInterceptor() {
    _classCallCheck(this, AuthenticationRequestInterceptor);

    this._logger = new BankLogger();
  }

  _createClass(AuthenticationRequestInterceptor, [{
    key: "fulfilled",
    value: function fulfilled(config) {
      return getAccessToken().then(function (accessToken) {
        if (accessToken) {
          config.headers = config.headers || {};
          config.headers.Authorization = "Bearer ".concat(accessToken);
        }

        return Promise.resolve(config);
      }, function (error) {
        //make the call anyway to get the header answer
        return Promise.resolve(config);
      });
    }
  }, {
    key: "rejected",
    value: function rejected(error) {
      return error;
    }
  }]);

  return AuthenticationRequestInterceptor;
}();

export default AuthenticationRequestInterceptor;
//# sourceMappingURL=AuthenticationRequestInterceptor.js.map

在 VS Code 中，我在整个项目中搜索了文本AuthenticationRequest的实例，但它不在代码中。

我可以使用什么技术来找出导致这些“页面”之一在加载时滚动到底部的原因？

Answer 1

您提供的代码片段看起来与发生的滚动事件没有直接关系。 可能是 promise resolve 之后发生的事情造成的。 不过，要直接回答您的问题，您可以通过将onscroll事件添加到您的body元素或发生滚动的div元素来收听ScrollIntoView ：

<div onscroll="preventScroll()">

然后，此事件将触发 function preventScroll ，它将执行诸如防止滚动之类的代码：

function preventScroll() {
  const x = window.scrollX;
  const y = window.scrollY;
  window.onscroll = () => window.scrollTo(x, y);
}

如果你想暂时停止滚动，你可以通过外部 boolean 变量来实现这一点，比如shouldPreventScrolling并在你想要阻止的滚动事件发生之前将它设置为true 。 然后，您可以在 function 之外手动将其取消设置为false或在超时时执行此操作：

let shouldPreventScrolling = true;
let isCurrentlyPreventingScrolling = false;

function temporarilyPreventScroll() {
  if (shouldPreventScrolling && !isCurrentlyPreventingScrolling) {
    isCurrentlyPreventingScrolling = true;
    const x = window.scrollX;
    const y = window.scrollY;
    window.onscroll = () => window.scrollTo(x, y);
    setTimeout(() => {
      shouldPreventScrolling = false;
      window.onscroll = temporarilyPreventScroll;
      isCurrentlyPreventingScrolling = false;
    }, 1000);
  }
}