long-list-scroll-rem/dist/LongListScrollRem.umd.cjs

A lightweight and high-performance Vue 3 virtual scrolling component designed to efficiently render long lists with dynamic rem-based sizing. Ideal for applications requiring smooth scrolling experiences and optimized rendering of large datasets.

!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".container[data-v-f1e8249c]{height:100%;overflow:auto;position:relative;pointer-events:auto}.placeholder[data-v-f1e8249c]{position:absolute;left:0;top:0;right:0;z-index:-1}.card-item[data-v-f1e8249c]{overflow:hidden}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).listScroll={},e.Vue)}(this,(function(e,t){"use strict";var o=document.createElement("style");o.textContent=".container[data-v-f1e8249c]{height:100%;overflow:auto;position:relative;pointer-events:auto}.placeholder[data-v-f1e8249c]{position:absolute;left:0;top:0;right:0;z-index:-1}.card-item[data-v-f1e8249c]{overflow:hidden}\n/*$vite$:1*/",document.head.appendChild(o);const l=((e,t)=>{const o=e.__vccOpts||e;for(const[l,n]of t)o[l]=n;return o})(Object.assign({name:"LongListScrollRem"},{__name:"index",props:{listData:{type:Array,default:[]},height:{type:Number,default:100},rootfontSize:{type:Number,default:0},key:{type:String,default:"id"}},setup(e,{expose:o}){let l=t.ref(16),n=t.computed((()=>e.height*a.value)),a=t.computed((()=>e.rootfontSize||l.value));const i=t.ref(null),r=t.ref(0),u=t.computed((()=>Math.ceil(r.value/n.value))),c=t.ref(0),d=t.ref(0),s=t.computed((()=>c.value+u.value)),p=t.computed((()=>e.listData.length*n.value)),f=t.computed((()=>e.listData.length?e.listData.slice(c.value,s.value+1):[])),v=t.computed((()=>`translate3d(0,${d.value}px,0)`));return t.onMounted((()=>{t.nextTick((()=>{r.value=i.value.clientHeight,document&&(l.value=parseFloat(document.documentElement.style.fontSize))}))})),o({handleSrollTopSize:function(e={top:0,behavior:"smooth",index:null}){let{top:t,behavior:o,index:l}=e,a=t;(0===l||l>0)&&(a=l*n.value),i.value.scrollTo({top:a,behavior:o||"smooth"})}}),(o,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:i,class:"container",onScroll:l[0]||(l[0]=e=>function(e){const t=e.target.scrollTop;c.value=Math.floor(t/n.value),d.value=t-t%n.value}(e))},[t.createElementVNode("div",{class:"placeholder",style:t.normalizeStyle({height:p.value+"px"})},null,4),t.createElementVNode("div",{class:"list-wrapper",style:t.normalizeStyle({transform:v.value})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(f.value,(l=>(t.openBlock(),t.createElementBlock("div",{class:"card-item",key:l[e.key],style:t.normalizeStyle({height:t.unref(n)+"px"})},[t.renderSlot(o.$slots,"default",{item:l},void 0,!0)],4)))),128))],4)],544))}}),[["__scopeId","data-v-f1e8249c"]]);l.install=e=>{e.component(l.name,l)};const n=[l],a=e=>{n.forEach((t=>e.component(t.name,t)))},i=window.Vue;"undefined"!=typeof window&&i&&a(i);const r={install:a};e.LongListScrollRem=l,e.default=r,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));