フロントエンドはどのように部分的なスクロール効果を実現していますか?

1.基本版の部分スクロール

ポイントは、 overflow: auto;属性をスクロールする必要がある領域に追加することです

早速、基本バージョンの部分スクロールコードから始めましょう。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 清除浏览器默认样式 */
* { margin: 0; パディング: 0; ボックスサイズ: ボーダーボックス; }

本文、
html { 幅: 100%; 高さ: 100%; }

/* 親ボックスの幅と高さはベースページの幅と高さである必要があるため、本文と html で幅と高さを指定する必要があります*/ main { display: flex;
position : relative; width: 100%; height : 100%; 背景色: プラム; }

/* スクロール効果を得るには、ul のコンテンツが main の高さを超える必要があります*/
ul { flex: 1; overflow: auto; }

/* 下のボックスは固定、中央のボックスは適応型*/
footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background-color: yellowgreen; } </style>

<本体>

<main>
<ul>
<li>これが最初のliです</li>
<li>これが2番目のliです</li>
<li>これが3番目のliです</li>
<li>これが4番目のliです</li>
<li>これは5番目のリです</li>
<li>これは6番目のリです</li>
<li>これは7番目のリです</li>
<li>これは8番目のリです</li> li>
<li>これは9番目のliです</li>
<li>これは10番目のliです</li>
<li>これは11番目のliです</li>
<li>これは12番目のliです</li>
<li>13リです</li>
<li>14リです</li>
<li>15リです
</li> <li>16リです</li>
<li >17日です</li>
<li>18リです</li>
<li>19リです</li>
<li>20リです</li>
<li>21リです</li> li>
<li>22日目です</li>
<li>23日目です</li>
<li>24日目です</li>
<li>25日目です</li>
<li>26日目です</li> li>
<li>27日です</li>
<li>28日です</li>
<li>29日です</li>
<li>30日です</li>
<li >これは 31 里です</li>
<li>これは 32 里です</li>
<li>これは 33 里です</li>
<li>これは 34 里です</li>
<li>これはは 35 里です</li>
<li>これは 36 里です</li>
<li>これは 37 里です</li>
<li>これは 38 里です</li>
<li>これは三十九里</li>
<li>これは四十里です</li>
<li>41リです</li>
<li>42リです</li>
<li>43リです</li>
<li>44リです</li> li>
<li>これで 45 回目です</li>
<li>46リです</li>
<li>47リです</li>
<li>48リです</li>
<li>49リです</li> li>
<li>これは50番目のリです</li>
<li>これは51番目のリです</li>
<li>これは52番目のリです</li>
<li>これは53番目のリです</li>
<li >これは54番目のリです</li>
<li>これは55番目のリです</li>
<li>これは56番目のリです</li>
<li>これは57番目のリです</li>
<li>これ58 里です</li>
<li>59 里です</li>
<li>60 里です</li>
</ul>
</main>
<footer></footer>

</body>

</html>

2. 上級版での部分スクロール --> 箱の左右にスクロール効果あり（京東商品分類のレイアウトを模倣）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 清除浏览器默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 祛除小圆点 */
    list-style: none;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .big {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: plum;
    overflow: hidden;
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: pink;
  }

  /* 父盒子的宽高要基础页面的宽高，所以 body、html要给宽高 */
  main {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  /* ul里面的内容要超出main的高度，才会有滚动效果 */
  ul {
    overflow: auto;
  }

  .one {
    background-color: yellow;
    width: 100px;
  }

  .two {
    flex: 1;
  }


  /* 底部盒子固定，中间盒子自适应 */
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: yellowgreen;
  }
</style>

<body>
  <div class="big">
    <div class="top">顶部</div>
    <main>
      <ul class="one">
        <!-- ul>li*100{第$个li} -->
      </ul>
      <ul class="two">
        <!-- ul>li*100{第$个li元素} -->
      </ul>
    </main>
    <footer>底部</footer>
  </div>

</body>

</html>

フロントエンドはどのように部分的なスクロール効果を実現していますか?

おすすめ