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

Question

Our team is working on a small bug in an online application on a large corporate website.

The Customer clicks Next to go to the next section, but there is no next URL - all is handled on the same web address.

The bug is: On one of the "pages", the Customer clicks Next, and the focus on the following page goes to one of the bottom controls. I don't know which control - but it is bypassing required fields by causing the page to scroll focus to the bottom of the form. I am the only software developer on our team, and my background is in Windows Forms.

In the code, VS Code found several instances of ScrollIntoView attached to base controls. Breakpoints are useless because the code has to be deployed to the test server to see results.

By using browser breakpoints in the javascript on mouse click-event, I was able to step to a segment of code that reads return Promise.resolve(config); - this is that file:

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

In VS Code, I have searched the entire project for an instance of the text AuthenticationRequest , but it isn't in the code.

What's a technique I can use to find out what is causing one of these "pages" to scroll to the bottom whenever it loads?

Answer 1

The code snippet that you have provided does not look like it is directly related to the scroll event that takes place. Perhaps it is caused by what happens after the promise has resolved. Nevertheless, to answer your question directly you can listen to ScrollIntoView by adding the onscroll event to either your body element or the div element where the scrolling takes place:

<div onscroll="preventScroll()">

This event will then trigger the function preventScroll which will execute code such as the prevention of scrolling:

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

If you want to stop scrolling temporarily, you can facilitate this by having an outside boolean variable such as shouldPreventScrolling and set it to true before the scroll event that you want to prevent is going to take place. You can then unset it to false outside of the function manually or do it in the timeout:

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);
  }
}