滚动溢出：使用浏览器滚动条隐藏固定div的内容

时间：2017-02-06 11:42:42

标签： jquery html css

我需要使用浏览器滚动条滚动固定div的内容。

可以用纯CSS完成吗？如果不是，你将如何使用JQuery解决方案？

我不想在div中使用滚动条。

实施例： https://jsfiddle.net/zy8qqmxa/ 

<div class="fixed-layer">
  <div class="content-layer">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    <br />
    <strong>Scroll past this point with the browser scrollbar.</strong>
    <br />
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

  </div>
</div>

.fixed-layer {
  position: fixed; 
  top: 20px; 
  left: 20px; 
  width: 400px; 
  height: 400px; 
  overflow: hidden
}

.content-layer {


}

这不是我想要的结果！ enter image description here

2 个答案:

答案 0 :(得分：0)

请检查

＆＃13;
＆＃13; 
.fixed-layer {
  position: fixed; 
  top: 20px; 
  left: 20px; 
  width: 400px; 
  height: 400px; 
  overflow: Scroll;
}

.content-layer {


}
＆＃13; 
<div class="fixed-layer">
  <div class="content-layer">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    <br />
    <strong>Scroll past this point with the browser scrollbar.</strong>
    <br />
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个。 

  <body>
  <div class="borderwrap top">&nbsp;</div>
  <div class="fixed-layer">
  <div class="content-layer">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    <br />
    <strong>Scroll past this point with the browser scrollbar.</strong>
    <br />
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
  </div>
  </div>
  <div class="borderwrap bottom">&nbsp;</div>
  </body>

  .borderwrap {
    width: 387px;      
  }
  .borderwrap.top {
    border-bottom: 1px solid;
  }
  .borderwrap.bottom {
    border-top: 1px solid;
  }
  .fixed-layer {
    height: 300px;
    overflow-y: scroll;
    padding: 0 5px 5px 0;
    text-align: justify;
    width: 400px;
  }
  .content-layer {
    border-left: 1px solid;
    border-right: 1px solid;
    padding: 0 5px;
  }
相关问题
最新问题