0

私のサイトでは、2 つの大きな (100% x 100%) div が 1 つのページに垂直に積み上げられています。これらの各 div には、内部にいくつかのセクションがあり、それぞれにアンカーがあります。左側に 2 つのフローティング サイドバーがあり (一度に 1 つだけ表示されます)、各アンカーに適切なリンクがあります。最初のサイドバーには DivOne へのリンクがあり、2 番目のサイドバーには DivTwo へのリンクがあります。各サイドバーには、サイドバーと div を「交換」するリンクもあります。サイドバーは次のようになります。

<div id="SidebarOne">
    <a href="#DivTwo">second screen</a>
    <a href="#OneSectionOne">Section One</a>
    <a href="#OneSectionTwo">Section Two</a>
    <a href="#OneSectionThree">Section Three</a>
</div>

私は CSS と HTML を関連性があると思われる基本にまで減らしました。CSSは次のとおりです。

#DivOne {
    top:0%;
    left:0%;
    }

#DivTwo {
    top:100%;
    left:0%;
    }

#DivOne, #DivTwo {
    width:100%;
    height:100%;
    overflow:hidden;
    position: absolute;
    display: block;
    }

#Container {
    left: 50px;
    top: 0px;
    height: 500px;
    width: 500px;
    overflow: auto;
    position: relative;
    }

そしてHTML：

<a id="DivOne"><div id="DivOne"></a>
  <div id="Container">
    <a id="OneSectionOne">Title One</a>
         <p>Content</p>
    <a id="OneSectionTwo">Title Two</a>
         <p>Content</p>
    <a id="OneSectionThree">Title Three</a>
         <p>Content</p>
  </div>
</div>

<a id="DivTwo"><div id="DivTwo"></a>
  <div id="Container">
    <a id="TwoSectionOne">Title One</a>
         <p>Content</p>
    <a id="TwoSectionTwo">Title Two</a>
         <p>Content</p>
    <a id="TwoSectionThree">Title Three</a>
         <p>Content</p>
  <div>
</div>

各 div は 100% x 100% で、DivTwo は top:100% に配置されます。

私が抱えている問題は、サイドバーのリンクをクリックすると、ページ全体が上に移動し、アンカーがページの上部に表示されることです。ページ全体ではなく、「コンテナ」divのみを適切な位置にスクロールすることを望んでいます。下部の div (DivTwo) で機能しているようですが、それはページの下部にあり、物理的にそれ以上スクロールできないためだと確信しています。div に「position: fixed;」を指定してみました。しかし、それはスワップする能力を失います。div を横に並べることも考えましたが、うまくいきませんでした。

これは、問題を確認できるデモです。最初のセクションのリンクをクリックすると、コンテナー全体が上に移動し、背景が明るいセクションが表示されます。

では、ページ全体ではなく、「コンテナ」divのみをスクロールするにはどうすればよいですか?

前もって感謝します！

- - - - - -編集 - - - - - - -

私は答えを見つけました：

これがデモです。

基本的に、2 番目の div を横に移動する必要があったので、今は left:100%; にあります。

#DivOne {
top: 0%;
left: 100%;
}

どちらも画面の下部にあるため、スクロールして表示するものは何もありません。ちょっと大まかな修正ですが、うまくいったようです！

でも、助けてくれたみんなに感謝します！

4

2 に答える 2

0

変えてみましたか

#DivOne {
  top:0%;
  left:0%;
 }

に

#DivOne {
  top:100%;
  left:0%;
 }
于 2013-10-17T17:59:02.073 に答える