react-modalに対してoverflowを設定した時に初期表示位置を任意の場所にしたい

目的

モーダルに overflow-Y: scroll を当てたい

詰まっている点

overflowを当てた時にモーダルの初期表示位置が top: 0 にあたる場所になる。

試した事

• top, margin, transformなど表示位置が変わりそうなプロパティを試したがスクロールの可動域が広がるだけで表示位置が変わらない

• overflowが未設定の状態だとtop指定に従う

  const modalStyles = {
    overlay: {
      background: 'rgba(0, 0, 0, 0.16)',
      top: '88px',
      left: '294px',
      overflowY: 'scroll',
    },
    content: {
      position: 'relative',
      top: '89px',
      left: '0',
      right: 'auto',
      bottom: 'auto',
      backgroud: '#fff',
      width: '956px',
      padding: '0',
      margin: '0 auto 50px',
      transform: 'translateY(100px)',
    },
  };