I found solution work for me. We have to handle inside iframe, not at parent website. The idea is: listen to wheel event of iframe document, if scroll position is top or bottom then preventDefault the wheel event. In my case, only div tag id message_list is overflow-auto, so I base on it to detect whether the scroll position is top or bottom. Hope this would help you all. My app is vue3 btw.

const handleWheel = (e) => {
  try {
    const el = document.getElementById('message_list');
    if (!el) {
      return;
    }
    const delta = e.deltaY;
    const atTop = el.scrollTop === 0;
    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
    if ((delta < 0 && atTop) || (delta > 0 && atBottom)) {
      e.preventDefault();
    }
  } catch {
    //
  }
};

onMounted(() => {
  document.addEventListener('wheel', handleWheel, {
    passive: false,
  });
});

onMounted(() => {
  document.addEventListener('wheel', handleWheel, {
    passive: false,
  });
});