<div id="readability-page-1" class="page"><section><div><div><p><a rel="noopener" href="/?source=post_page-----e440aa77b4e9--------------------------------"><img alt="Dongmin Jang" src="https://miro.medium.com/fit/c/56/56/1*RBfR8MoT_zPwbzfWAGb0gw.jpeg" width="28" height="28"></a></p></div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/6190/1*pP4UWO-R_o2XARWUq0fqiA.jpeg" width="3095" height="2693" role="presentation"></p></div></figure><p id="0562">Virtual scroll 을 적용해야 하는데, awesome vue에 있는 코드들로는 요구하는 기능을 구현 할 수 없어서 간단히 직접 만들었습니다.</p><p id="9013">예전에는 리스트의 전체 height와 노출하고자 하는 아이템들의 y좌표를 계산해서 처리 했었는데 이번에는 instagram에서 동작하는 부분을 보고 비슷하게 구현해보려고 했습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/4208/1*y1DQRp19tOYQ0w4zoQAPVQ.png" width="2104" height="1452" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*y1DQRp19tOYQ0w4zoQAPVQ.png?q=20"></p></div></figure><p id="1905">노출하고자 하는 리스트 위 아래로 padding 을 줘서 처리했습니다. 이렇게 하면 전체 리스트의 height 값을 따로 계산할 필요가 없어서 편합니다. <br>스크롤을 내리면 노출되고 있는 리스트의 최상단 아이템의 height만큼 padding-top 에 추가하고, padding-bottom 은 일정치만큼 빼주면 됩니다.</p><p id="26fe">제가 간단히 구현한 것은 아래 이미지처럼 동작합니다.</p></div><div><figure><p><img alt="" src="https://miro.medium.com/max/4060/1*GWYcUeBbbtN6jzwz6AlYOw.png" width="2030" height="1226" role="presentation"></p></figure><figure><p><img alt="" src="https://miro.medium.com/max/3956/1*hyCfa6B08erM03yTqmrvTA.png" width="1978" height="1190" role="presentation"></p></figure></div><div><pre><span id="3302">&lt;template&gt;<br>  &lt;div&gt;<br>    &lt;span class="scroll"&gt;{{ scrollY }}&lt;/span&gt;<br>    &lt;ul ref="list" :style="getStyle"&gt;<br>      &lt;li v-for="item of displayList" :key="item.index" :item="item.index"&gt;<br>        [{{ item.name }}]&amp;nbsp;{{ item.description }}<br>      &lt;/li&gt;<br>    &lt;/ul&gt;<br>  &lt;/div&gt;<br>&lt;/template&gt;</span><span id="ae70">&lt;script&gt;</span><span id="a7fd">export default {<br>  name: 'HelloWorld',<br>  data() {<br>    return {<br>      dummy: [],<br>      sample: {<br>        name: 'Tom',<br>        description: 'Hellow world',<br>      },<br>      startIdx: 0,<br>      endIdx: 10,<br>      paddingTop: 0,<br>      paddingBottom: 0,<br>      scrollY: 0,<br>      defaultHeight: 34,<br>    }<br>  },<br>  created() {<br>    for (let i = 0 ; i &lt; 100; i++) {<br>      this.dummy.push({<br>        ...this.sample,<br>        index: i,<br>      });<br>    }<br>    this.paddingBottom = this.defaultHeight * this.dummy.length - this.endIdx;<br>  },<br>  mounted() {<br>    window.addEventListener('scroll', this.onScroll);<br>  },<br>  beforeDestroy() {<br>    window.removeEventListener('scroll', this.onScroll);<br>  },<br>  computed: {<br>    getStyle() {<br>      return {<br>        paddingTop: `${this.paddingTop}px`,<br>        paddingBottom: `${this.paddingBottom}px`,<br>      }<br>    },<br>    displayList() {<br>      return this.dummy.slice(this.startIdx, this.endIdx);<br>    }<br>  },<br>  methods: {<br>    onScroll() {<br>      this.scrollY = window.scrollY;<br>      this.startIdx = Math.floor(this.scrollY / this.defaultHeight);<br>      this.endIdx = Math.min(this.dummy.length, this.startIdx + 10);<br>      this.paddingTop = this.defaultHeight * this.startIdx;<br>      this.paddingBottom = this.defaultHeight * (this.dummy.length - this.endIdx);<br>    }<br>  }<br>}<br>&lt;/script&gt;<br>&lt;style scoped&gt;<br>.scroll {<br>  position: fixed;<br>  top: 10px;<br>  font-size: 20px;<br>  font-weight: bold;<br>}</span><span id="ebf2">ul {<br>  list-style-type: none;<br>}<br>li {<br>  display: block;<br>  margin: 0 10px;<br>  padding: 5px;<br>  border: 1px solid red;<br>}<br>&lt;/style&gt;</span></pre><p id="374c">스크롤을 움직일 때마다 전체 리스트에<span id="rmm"><span id="rmm">서</span></span> 노출할 부분에 대한 시작, 끝의 index를 계산합니다. 그리고 스크롤 방향에 따라 padding-top, bottom 을 계산해줍니다. 원리도 간단하고 실제 코드도 간단합니다.</p><p id="e5d6">물론 실제 프로젝트에서는 scroll to top 이나 중간 부터 노출되는 기능 등이 들어가서 여러가지 조건들을 고려한 수치들이 많이 들어갔고, 다양한 조건들을 고려해야 되서 구조 또한 훨씬 복잡합니다.</p><p id="db44">npm에서 virtual scroll을 가져다가 수정하려면 긴 코드들과 계산 로직들이 부담스러운데, 빠르고 가볍게 구현해보려고 시도해 본 내용을 남깁니다.</p></div></section></div>

Stories by Dongmin Jang on Medium

[Vuejs] 간단한 virtual scroll 만들기
Virtual scroll 을 적용해야 하는데, awesome vue에 있는 코드들로는 요구하는 기능을 구현 할 수 없어서 간단히 직접 만들었습니다.
예전에는 리스트의 전체 height와 노출하고자 하는 아이템들의 y좌표를 계산해서 처리 했었는데 이번에는 instagram에서 동작하는 부분을 보고 비슷하게 구현해보려고 했습니다.
노출하고자 하는 리스트 위 아래로 padding 을 줘서 처리했습니다. 이렇게 하면 전체 리스트의 height 값을 따로 계산할 필요가 없어서 편합니다. 
스크롤을 내리면 노출되고 있는 리스트의 최상단 아이템의 height만큼 padding-top 에 추가하고, padding-bottom 은 일정치만큼 빼주면 됩니다.
제가 간단히 구현한 것은 아래 이미지처럼 동작합니다.
<template>
  <div>
    <span class="scroll">{{ scrollY }}</span>
    <ul ref="list" :style="getStyle">
      <li v-for="item of displayList" :key="item.index" :item="item.index">
        [{{ item.name }}]&nbsp;{{ item.description }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      dummy: [],
      sample: {
        name: 'Tom',
        description: 'Hellow world',
      },
      startIdx: 0,
      endIdx: 10,
      paddingTop: 0,
      paddingBottom: 0,
      scrollY: 0,
      defaultHeight: 34,
    }
  },
  created() {
    for (let i = 0 ; i < 100; i++) {
      this.dummy.push({
        ...this.sample,
        index: i,
      });
    }
    this.paddingBottom = this.defaultHeight * this.dummy.length - this.endIdx;
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },
  computed: {
    getStyle() {
      return {
        paddingTop: `${this.paddingTop}px`,
        paddingBottom: `${this.paddingBottom}px`,
      }
    },
    displayList() {
      return this.dummy.slice(this.startIdx, this.endIdx);
    }
  },
  methods: {
    onScroll() {
      this.scrollY = window.scrollY;
      this.startIdx = Math.floor(this.scrollY / this.defaultHeight);
      this.endIdx = Math.min(this.dummy.length, this.startIdx + 10);
      this.paddingTop = this.defaultHeight * this.startIdx;
      this.paddingBottom = this.defaultHeight * (this.dummy.length - this.endIdx);
    }
  }
}</script>
<style scoped>
.scroll {
  position: fixed;
  top: 10px;
  font-size: 20px;
  font-weight: bold;
}
ul {
  list-style-type: none;
}li {
  display: block;
  margin: 0 10px;
  padding: 5px;
  border: 1px solid red;
}</style>
스크롤을 움직일 때마다 전체 리스트에서 노출할 부분에 대한 시작, 끝의 index를 계산합니다. 그리고 스크롤 방향에 따라 padding-top, bottom 을 계산해줍니다. 원리도 간단하고 실제 코드도 간단합니다.
물론 실제 프로젝트에서는 scroll to top 이나 중간 부터 노출되는 기능 등이 들어가서 여러가지 조건들을 고려한 수치들이 많이 들어갔고, 다양한 조건들을 고려해야 되서 구조 또한 훨씬 복잡합니다.
npm에서 virtual scroll을 가져다가 수정하려면 긴 코드들과 계산 로직들이 부담스러운데, 빠르고 가볍게 구현해보려고 시도해 본 내용을 남깁니다.

[Vue] 간단한 virtual scroll 만들기

댓글