ページ上の要素のオーバーフロー部分までスクロールできません

Question

ページのサイズを変更すると、要素がビューポートの上にオーバーフローしてしまい、上にスクロールして表示できなくなります。解決策のある質問を見つけましたが、うまくいきませんでした。 2 つの「コア」非表示 div と、すべてのコンテンツを含む 1 つの div 要素があります。

「container」div が存在するのは、この問題を解決しようとしているためです。

.container {
   位置: 固定;
   トップ: 0;
   左: 0;
   幅: 100%;
   高さ: 100%;
   Z インデックス: 500;
}

。メインコンテンツ {
   ディスプレイ: フレックス;
   幅: 100%;
   高さ: 100%;
   オーバーフロー: 自動;
   マージン: 自動;
}

。窓 {
   /*高さ: 16vw;
   幅: 27vw;*/
   ディスプレイ: フレックス;
   高さ: 550ピクセル;
   幅: 800ピクセル;
   位置: 絶対;
   トップ: 50%;
   左: 50%。
   境界線: 青の実線 5 ピクセル;
   背景色: 黒;
   マージン: 自動;
   オーバーフロー: 非表示;
}

<div class="container">
  <div class="メインコンテンツ">
    <div class="window" id="window1" style="transform: translation(-10%, -90%);">
      <div class="header" id="window-header">
        <img src="https://picsum.photos/800/550">
        <p class="title">ナビゲーション</p>
      </div>
    </div>
  </div>
 </div>

Answer 1

この問題の唯一の解決策は、カスタム スクロールバーを作成することだと思います (ビューポートの上に画像を配置する必要がある場合)

これはあなたのコードに基づいて私が作成したコードです

リーリー リーリー リーリー ＃＃＃説明＃＃＃

基本的には、HTML と CSS を使用してスクロールバーを作成し、画像の右端に配置しました

HTML と CSS を理解できることを願っています 次に、JavaScript の部分を見てみましょう

まず、マウス座標をマッピングします

リーリー

関数を呼び出すか、ストップドラッグ変数を変更するイベントリスナーを作成します

リーリー

次に、startDrag() 関数を作成します

リーリー

この関数では、ユーザーが現在スクロール バーをドラッグしているため、最初に stopdrag を false に設定します。 次に、インターバルループコードを設定します 座標によると、mouse.y はほとんど試行錯誤です。 制限内かどうかを確認し、制限内であれば移動します 次に、ドラッグしながらスクロールバーの上部の位置を変更します（計算は試行錯誤です） 次に、ウィンドウ クラス div の下部の位置を変更して、ウィンドウ クラス div の位置を変更します (画像自体の位置は変更できないため、ウィンドウ クラス div 全体を移動したくない場合は、その上に別のコンテナを作成できます)。それを見るために ドラッグが停止すると、間隔をクリアします

Answer 2

この問題を解決してくれた @TylerH に感謝します。問題は、HTML の変換スタイルにあります。削除すると正常にスクロールします。私が見たところ、スクロールをオフセットし、要素だけではなくページ全体を移動しているようです。皆さんの助けに感謝しますが、私はそれを理解しました。