1

私たちのモバイルWebサイトには、固定位置のフッターとその下をスクロールするフィードがあります。私が観察している問題は、これら2つのdivが重複しているため、フィードのリンクがフッター領域からクリック可能であるということです。

フッター：

.footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
height:45px;
.background-image-gradient (@topFooterColor, @bottomFooterColor);
box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.45);
background-repeat: repeat-x;
text-align:center;
border-top: 1px solid @topFooterBorder;
}

フィードはstatus_updatesというdivに含まれています。

.status_updates {
border-left:0px;
margin-top:0px;
margin-bottom:10px;
}

ステータス更新div内には、サイト上の他の場所へのリンクがあります（ユーザーのプロファイル、ステータス更新など）。私が観察している問題は、これらのリンクがフッター（画面の下部45px）からクリック可能なままであるということです。

.status_updatesのz-indexを試してみましたが、z-index：-1に設定しても、これは機能しません。私の理解では、フッターのz-indexは固定された位置にあるため、無視されています。

.status_updates divをtop：40px（固定位置ヘッダーの高さ）とbottom：45px（固定位置フッターの高さ）で絶対値にすると、フッターが.status_udpatesdivitを下回るようになります。 divが重複しなくなったため、問題が修正されます。ただし、このソリューションでは、サイト上の他の多くのページを再構築する必要があります。

.footer divを固定位置に保ち、.status_updates divを相対位置に保ち、.status_udpates内に含まれるリンクがフッターからクリックできないようにするソリューションはありますか？

これが私の問題を視覚化するのに役立つかもしれない写真です： スクロール可能なフィードのリンクは、フッターからクリックできます

4

2 に答える 2

1

As Torsten mentions above, this is a known browser issue. I had a similar situation and solved it as follows.

If you add a margin-bottom to your scrolling content that is the height of your footer, (eg height of footer is 45px, margin-bottom: 45px on scrolling content), then the content would appear to scroll behind the footer, but would really just scroll to the footer. This way since the link will never be technically behind the footer, it'll never have the issue with a click-through.

Of course this only works if your footer isn't transparent/translucent or otherwise designed such that you can "see through" it to the content below.

于 2012-08-02T22:02:39.783 に答える
0

これは既知のバグです。スクロールがプログラムによって行われた場合、固定要素をクリックすることができます。

Remy Sharp には、この問題に関する優れた記事があります。

于 2012-08-02T22:01:04.857 に答える