基本的に、私はdiv内のdivであるWebページを持っています。div 1（コンテナ）の高さが500pxだとします。Div2はそのコンテナ内で100pxの高さです。私がやりたいのは、ユーザーが画面上のdiv 2（これは携帯電話のWebページです）に触れていることを検出し、ユーザーが上下にドラッグすると、divが一緒に移動することです。私はいくつかの調査を行い、CSS3でmatrix3dとtransformyを使用してこれが行われているのを見てきました（しかし、私のようなこの種のことについてほとんど経験のない人には良い説明が見つかりません）。たとえば、ユーザーが2番目のdivを一番下にドラッグし、コンテンツの一部がコンテナーdivの外に出るようにしたいと思います。下にスクロールしたくない、消えてほしい...しかし、一種の「バウンス」してビューに戻したい。内訳は次のとおりです。
- ユーザーが画面を押す
- ユーザーは、div1の内側にあるdiv2をドラッグします。divをドラッグすると、ドラッグの方向に移動します。
- ユーザーはdivを上/下に右にドラッグできます。彼らがそれをコンテナdivの外にドラッグした場合、それは問題ありません。コンテナのdivのサイズを変更したり、スクロール可能にしたりしないでください。また、div2の一部が表示されなくなります。
- ユーザーがドラッグを放すと、divは元の位置に跳ね返るはずです。たとえば、上にドラッグしすぎると、位置100、100に跳ね返ります。下にドラッグしすぎると、100、500に跳ね返ります（跳ね返りはCSSトランジションで制御できると思います）。
それで、これを実際に見るために見ることができる例や、これを達成する方法を理解するのに役立つチュートリアルを誰かが持っていますか？開始するための基礎としてコードを提供しなかったことをお詫びしますが、実際には、どこから始めればよいのか本当にわかりません。
どんな助けでも大歓迎です。