溢出:隐藏在Firefox或Opera中不工作

我试图隐藏侧边栏上的溢出，这样我就可以在页面滚动时产生很好的视觉效果&显示下面的侧边栏(将是相同的，但不同的字体颜色，图像等)。

在Safari &chrome，而不是Firefox或Opera……顶部侧边栏不隐藏，位于下面侧边栏内容的顶部。

我对此进行了广泛的研究，但答案与我想要实现的目标无关。似乎这个问题可能是由于overflow:hidden不能很好地与position:fixed配合。

我错过了什么真的很明显，有一个解决方案吗?

下面的代码:

div#latest {
  background: #1a1a19;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden!important;
  ;
  z-index: 2
}
div#latest div#latestslides {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
div#latest div#latestslides div.slide {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  opacity: 1;
}
/* sidebar */
div.sidebar {
  width: 350px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden!important;
  z-index: 1;
}
.content {
  background-color: #FC0;
}

<body>
  <!-- Main -->
  <div id="main">
    <!-- Start latest -->
    <div id="latest">
      <div class="sidebar">
        <div class="nav" id="">
          <div class="sections" style="color:pink">
            <p>THE CONTENT ABOVE</p>
            <p>THE CONTENT ABOVE</p>
            <p>THE CONTENT ABOVE</p>
            <p>THE CONTENT ABOVE</p>
            <p>THE CONTENT ABOVE</p>
            <p>THE CONTENT ABOVE</p>
          </div>
        </div>
      </div>
      <div id="latestslides" style="background-color:black">
        <div class="slide" style="background-image:url(images/banner.jpg);"></div>
        <div class="slide" style="background-image:url(images/banner.jpg);"></div>
      </div>
    </div>
    <!-- End latest -->
    <!-- Start B Sidebar -->
    <div class="sidebar">
      <div class="nav" id="">
        <div class="sections" style="color:orange">
          <p>THE CONTENT BELOW</p>
          <p>THE CONTENT BELOW</p>
          <p>THE CONTENT BELOW</p>
          <p>THE CONTENT BELOW</p>
          <p>THE CONTENT BELOW</p>
          <p>THE CONTENT BELOW</p>
        </div>
      </div>
    </div>
    <!-- End B sidebar -->
    
    <!-- Portfolio-->
    <section id="portfolio" style="margin-left:350px;">
      <div class="container">
        <header>
          <h2>content</h2>
        </header>
        <p style="font-size:28px; line-height:30px;">Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit
          lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis
          fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc
          nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam
          vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum
          fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus.
        </p>
      </div>
    </section>

  </div><!-- End Main -->

</body>

Safari -包含"上面的内容"的侧边栏隐藏在滚动显示下面的内容

Firefox -包含上面内容的侧边栏不会隐藏在滚动条上，并覆盖下面的内容

你的侧边栏有一个固定的位置，这使它脱离了文档流。它不再是隐藏溢出元素的子元素。显然浏览器的处理方式不同。

您需要使用不同的结构来限制可见内容，要么没有固定元素，要么在固定侧边栏中嵌套元素。你似乎在复制内容，所以不管怎样，另一种方法可能会更好。从"粘性侧边栏"中寻找灵感。

这是我在你的精彩网站上找到的一个解决方案，它使用clip并在所有主要浏览器中工作，甚至是IE8!!http://jsfiddle.net/lmeurs/jf3t0fmf/

注意:在移动设备上，顶部元素只在滚动释放时隐藏。

body {
  font: 14px arial;
}
.parent-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.parent {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: yellow;
  clip: rect(0, auto, auto, 0);
}
.child {
  position: fixed;
  top: 50px;
  left: 50px;
  padding: 1em;
  background-color: red;
}
.child.pink {
  background-color: pink;
}

<div class="child pink">Fixed positioned element</div>
<div class="parent-container">
  <div class="parent">
    <div class="child red">Fixed positioned element</div>
  </div>
</div>
<h1>Workaround to clip fixed positioned element to parent</h1>
<p>For more details see <a href="http://stackoverflow.com/a/23859719/328272">our answer</a> at StackOverflow's question "<a href="http://stackoverflow.com/a/23859719">parent &amp; child with position fixed, parent overflow:hidden bug</a>".</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>

相关内容

最新更新

热门标签：