1

最初に少し背景。スプレッドシートと同じように機能するビジュアルコンポーネントに取り組んでいます。両方の次元でスクロールできるコンテンツ領域と、常に表示されたままの左右の軸インジケーター。

インスピレーションを得るために、私はグーグルのスプレッドシートのhtml/cssを見てきました。私は機能する同様のソリューションを構築しましたが、もう少しエレガントなソリューションの正確な仕組みは私にはわかりません。

それらのソリューションの関連する構造は次のとおりです。

  • 【コンテナ】Div。明示的なサイズ。オーバーフローが隠されています。相対的な位置。
    • 【Vスクロール】Div。「コンテンツサイズ」、FirebugまたはChromeを使用したスタイリングはまったくありません。
    • 【左側】Div。コンテンツサイズ。表示:インラインブロック。オーバーフローが隠されています。相対的な位置。
      • ヘッダーを含むテーブル
    • 【右側】Div。コンテンツサイズ。表示:インラインブロック。オーバーフローが隠されています。相対的な位置。
      • コンテンツを含むテーブル

垂直スクロールを行うには、例としてtop:-15pxを設定することで実行できるように、V-Scrolldivを上に移動します。FireBugとクロム検査ツールの両方を使用すると、次のことがわかります。

  • 垂直スクロールを実行すると、V-Scrolldivが上に移動します。
  • トップまたはスタイルのプロパティの変更は、V-Scrolldivでは確認できません。
  • 内部コンテンツは、Vスクロールdivとともに上に移動します。

彼らがVスクロールdivをどのように配置するかについての提案はありますか?トップスタイルも、要素の固定セットとは異なるポジショニングスタイルもないのは奇妙に思えます。

4

1 に答える 1

0

I'm not familiar with the internals of the google code, but I imagine they are manipulating the scrollTop of the container div through javascript. This will essentially scroll the div even though overflow is hidden causing there to be no scrollbar.

于 2012-04-18T18:58:39.177 に答える