仅滚动正文文档中的选定内容

Question

我想使用页面滚动效果，以便在布局中仅滚动#right 元素的内容。滚动帖子时可以在 Facebook 上看到类似的效果（在左侧面板和上栏保持原位的同时滚动帖子）。你们中的任何人都知道如何在代码中为我的 #right 容器获得相同的效果？#header,#footer{  width:100%;  height:80px;  background:blue;}#content{  width:1000px;  margin:0 auto;  overflow:hidden;}#left{  width:200px;  float:left;  background:green;  margin:20px 0;  height:100vh;}#right{  float:right;  width:calc(100% - 220px);}.item{  height:80px;  margin:20px 0;  background:red;}<div id="header">    header</div><div id="content">    <div id="left">        left    </div>    <div id="right">     <!-- this content is scrolling-->        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>        <div class="item">item</div>    </div></div><div id="footer">    footer</div>

Answer 1

使用 JQuery，您可以添加样式为position:fixedand的类，top:0并使用滚动功能触发，以获得更好的侧面元素视图/效果。

$(window).scroll(function(){

    var header_height = $('#header').height();

      if ($(this).scrollTop() > header_height) {

          $('#left').addClass('fixed');

      } else {

          $('#left').removeClass('fixed');

      }

});

#header,#footer{

  width:100%;

  height:80px;

  background:blue;

}

#content{

  width:1000px;

  margin:0 auto;

  overflow:hidden;

}

#left{

  width:200px;

  float:left;

  background:green;

  margin:20px 0;

  height:100vh;

}

#right{

  float:right;

  width:calc(100% - 220px);

}

.item{

  height:80px;

  margin:20px 0;

  background:red;

}

.fixed{

  position:fixed;

  top:0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="header">

    header

</div>

<div id="content">

    <div id="left">

        left

    </div>

    <div id="right"> 

    <!-- this content is scrolling-->

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

    </div>

</div>

<div id="footer">

    footer

</div>

Answer 2

position: fixed在CSS 中使用属性

#header,#footer{

  width:100%;

  height:80px;

  background:blue;

}

#content{

  width:1000px;

  margin:0 auto;

  overflow:hidden;

}

#left{

  width:200px;

  float:left;

  background:green;

  /* Enter The Position Fixed Property Here! */

  position:fixed;

  margin:20px 0;

  height:100vh;

}

#right{

  float:right;

  width:calc(100% - 220px);

}

.item{

  height:80px;

  margin:20px 0;

  background:red;

}

<div id="header">

    header

</div>

<div id="content">

    <div id="left">

        left

    </div>

    <div id="right"> 

    <!-- this content is scrolling-->

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

        <div class="item">item</div>

    </div>

</div>

<div id="footer">

    footer

</div>

有一些位置错位，因为你有你的头。将此属性用于要滚动的 div。根据需要进行放置

Answer 3

使用位置：固定并降低其“左”类的高度。