如何在两个滚动视图中禁用内容滚动

.parent-container {
  overflow: hidden;
}

import React, { useRef } from 'react';

const MyComponent = () => {
  const scrollViewRef = useRef(null);

  const disableScroll = () => {
    scrollViewRef.current.style.overflow = 'hidden';
  };

  return (
    <div className="parent-container">
      <div ref={scrollViewRef} className="scroll-view">
        {/* 滚动视图内容 */}
      </div>
    </div>
  );
};

<template>
  <div class="parent-container">
    <div ref="scrollView" class="scroll-view">
      <!-- 滚动视图内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.disableScroll();
  },
  methods: {
    disableScroll() {
      this.$refs.scrollView.style.overflow = 'hidden';
    },
  },
};
</script>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="parent-container">
      <div #scrollView class="scroll-view">
        <!-- 滚动视图内容 -->
      </div>
    </div>
  `,
})
export class MyComponent {
  @ViewChild('scrollView', { static: true }) scrollViewRef!: ElementRef;

  ngAfterViewInit() {
    this.disableScroll();
  }

  disableScroll() {
    this.scrollViewRef.nativeElement.style.overflow = 'hidden';
  }
}