vue local mobile terminal scrollable page (css achievable pure)

Description: partial page scrolling movement end (see below)

The main functions to achieve Code (Code only the main function of the code, failure to understand the removal of part of their needs):

Note: The focus is class = "textScroll" style, and the rest are supporting

<template>
  <div class="textScroll">
    <ul>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvoladhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
      <li class="textList">
        <div class="headImg"><img src="../../../src/assets/image/bg-header.jpg"></div>
        <p>ekffbhdslfbsdvlskvsdhvlsadvkshvawvola
          dhivsalvswqygrehsfdhdsfhjndsfnsdgnjdsgndsgnfgfngfnfnesfhbdsdierhvr</p>
      </li>
    </ul>
  </div>
</template>
<style lang="less" scoped>

  .textScroll {
    display: inline-block;
    position: fixed;
    top: 23.2rem;
    bottom: 0;
    overflow: scroll;
    right: 0;
    width: 100%;
    margin-bottom: 4.7rem;
    z-index: 1;
    background-color:rgb(241,243,244);
  }

</style>

Red is a partial sliding frame necessary pattern

There are doubts, please leave a message below