如何隔離或捕獲對 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);
  }
}