42

ユーザーがページ上の小さいバージョンをクリックしたときにフル解像度の画像を表示するために、Webサイトに画像ポップアップ機能があります。

これはCSSそれを配置する電流です：

div#enlargedImgWrapper {
    position: absolute;
    top: 30px;
    left: 55px;
    z-index: 999;
}

問題は、ページのさらに下の画像をクリックしても、ウィンドウがページの左上隅に表示されたままで、上にスクロールするまでウィンドウが表示されないことです。ドキュメントに対する現在の位置に関係なく、ウィンドウに対して表示される必要があります。

注：position: fixed;一部の画像は画面よりも高い可能性があるため、使用したくないので、ユーザーが画像に沿ってスクロールできるようにします。

私のアイデアは、JSを使用してtop値を変更することでした。

var scrollValue = ???;
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';

ユーザーがページをどれだけ下にスクロールしたかをどのように検出できますか（var scrollValue）？
それとも、これを行うための「より良い」方法はありますか？

編集：可能であれば、jQueryなしでこれを実行したいと思います。

4

3 に答える 3

73

純粋なJavaScriptはとを使用scrollTopしscrollLeftます：

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQueryバージョン：

var scrollLeft = $(window).scrollLeft() ;
var scrollTop = $(window).scrollTop() ;

必要なのはこれです：

document.getElementById('enlargedImgWrapper').style.top = (scrollTop+30) + 'px';
于 2012-07-07T09:29:09.827 に答える
5 
document.getElementById('enlargedImgWrapper').scrollTop;

MDN

このプロパティの値は、スクロール可能な範囲内のコンテンツの現在の垂直オフセットに等しくなります。このプロパティは任意の値に設定できますが、0未満の値を割り当てると、プロパティは0に設定されます。最大値より大きい値を割り当てると、プロパティは最大値に設定されます。

このプロパティをインラインで設定できますが、ドキュメントの読み込み中に結果に一貫性がなくなる可能性があります。

scrollTopプロパティ

于 2012-07-07T09:24:33.903 に答える
-1

それを試してみてください

console.log('Current Scroll (X/Y)', window.pageXOffset, window.pageYOffset);

ここで、水平方向および垂直方向から上にどれだけスクロールするかを確認できます。

スクロールに関する完全なドキュメントは次のとおりです： https ：//javascript.info/size-and-scroll-window

于 2022-03-03T10:32:25.157 に答える