[re选键在打开菜单时阻止滚动

Question

我正在我的项目中使用react-select，并且当菜单打开时，我无法向下滚动页面我试图设定有没有人熟悉这个问题？

      <Select
        styles={filter.name !== "More" ? basicStyles : moreStyles}
        isMulti={filter.name !== "colorType" ? true : false}
        options={options}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        placeholder=""
        value={selectedValues ? selectedValues : []}
        isClearable={false}
        isSearchable={false}
        onChange={addSelectFilter}
        components={{ MultiValueLabel: customMultiValueLabel }}
        blurInputOnSelect={false}
        classNamePrefix={filter.name === "More" ? "more" : "basic-drop"}
        className={filter.name === "More" ? "more-select-container" : undefined}
        menuIsOpen={
          filter.name === "More" ? undefined : menuIsOpen ? true : undefined
        }
        menuShouldBlockScroll={false}
      />

Answer 1

经过长期研究，我找到了解决方案将此代码放在index.js中基本上它将把滚动和滚轮变成被动事件

export const eventListenerOptionsSupported = () => {
  let supported = false;

  try {
    const opts = Object.defineProperty({}, "passive", {
      get() {
        supported = true;
      },
    });

    window.addEventListener("test", null, opts);
    window.removeEventListener("test", null, opts);
  } catch (e) {}

  return supported;
};

export const noop = () => {};

const defaultOptions = {
  passive: true,
  capture: false,
};
const supportedPassiveTypes = ["scroll", "wheel"];
const getDefaultPassiveOption = (passive, eventName) => {
  if (passive !== undefined) return passive;

  return supportedPassiveTypes.indexOf(eventName) === -1
    ? false
    : defaultOptions.passive;
};

const getWritableOptions = (options) => {
  const passiveDescriptor = Object.getOwnPropertyDescriptor(options, "passive");

  return passiveDescriptor &&
    passiveDescriptor.writable !== true &&
    passiveDescriptor.set === undefined
    ? Object.assign({}, options)
    : options;
};

const prepareSafeListener = (listener, passive) => {
  if (!passive) return listener;
  return function (e) {
    e.preventDefault = noop;
    return listener.call(this, e);
  };
};

const overwriteAddEvent = (superMethod) => {
  EventTarget.prototype.addEventListener = function (type, listener, options) {
    const usesListenerOptions = typeof options === "object" && options !== null;
    const useCapture = usesListenerOptions ? options.capture : options;

    options = usesListenerOptions ? getWritableOptions(options) : {};
    options.passive = getDefaultPassiveOption(options.passive, type);
    options.capture =
      useCapture === undefined ? defaultOptions.capture : useCapture;
    listener = prepareSafeListener(listener, options.passive);

    superMethod.call(this, type, listener, options);
  };
};

const supportsPassive = eventListenerOptionsSupported();

if (supportsPassive) {
  const addEvent = EventTarget.prototype.addEventListener;
  overwriteAddEvent(addEvent);
}