scrollHook Vue 滚动监听钩子

<template>
  <div class="home" >
  &lt;Card style=&#39;margin: 20% auto; width: 600px&#39; title=&#39;&#39; &gt;

    &lt;p&gt;
      {{ state }}
    &lt;/p&gt;
    
    &lt;div style=&#39;overflow: scroll; height: 200px&#39; ref=&#39;element&#39; &gt;

      &lt;h1 style=&#34;width: 600px&#34;&gt;
        中文互联网的讨论从未消失，只是在被资本稀释和割裂
        他们祈祷着资本不会降临，毁灭掉自己的庇护所。
      &lt;/h1&gt;

      &lt;p&gt;
          在很多有关于互联网的理论中，都粗略的将互联网的发展分为两个阶段。即Web1.0和2.0阶段。尽管近些年来由于区块链，大数据的发展，很多人也声称我们已经走入了Web3.0时代，但是实际上，这个东西有多大是噱头，有多大的是真的，还很难说。
        谈到讨论，互联网环境这些年的变化是难以回避的。Web1.0时代特别容易理解，基本上就是门户网站的时代。在2000年的互联网泡沫破碎之前，门户网站上信息的“一对多传递”是Web1.0时代的主要特征。在那一时期，用户对于互联网上内容的讨论基本存留在聊天室这样的区域，互联网具有非常强的匿名性，而主要的互联网参与用户无论是生活的阶级和知识水平都相对较高，毕竟那个时期能够买的起电脑和能上网的家庭屈指可数。
        Web1.0时代的“一对多”到了2.0的时代变成了“多对多”。在博客诞生之后，任何人都可以参与互联网的讨论。2008年前后，中文互联网上曾经呈现出蓬勃的内容爆发。无论是韩寒等人的博客，还是当年明月这样的文字写手，都在那一时期创造了大量的优质的内容。你很难想象会有人认真的用几千字跟你讨论民主和自由的意义，更难以想象大量的人对于民主这个概念开始全民讨论和分析。
        如果不选择，代价又是什么呢？
        如果不选择，代价又是什么呢？
        博客的衰落是从微博的崛起开始的。当几千字的长文被局限在140字的时候，表达和讨论的意义也被段子，营销号和情绪所稀释了。随着微博，推特这种社交媒体平台的诞生，我们进入了所谓的2.0时代。在这里任何人都可以讨论和表达。
        互联网的发展和科技的进步是紧密相连的。微博这种形式的崛起也和移动互联网的爆发有着密不可分的关系。Web端逐渐衰落，App开始崛起。所有紧跟这一形式的早期社区都崛起了，而所有没有紧跟变化的都在逐渐衰落，也有的乃至消亡，比如人人网，比如豆瓣。数字时代这些内容的消亡和体制无关，他们没有跟上科技的变化亦没有被资本所青睐，这才是主要原因。
        智能手机的价格越来越低，移动互联网的入网成本也变得越来越低。当web2.0的门槛已经被降到极低的时候，在web1.0时代所拥有的那种互联网上特有的精英讨论的氛围，也随之破碎。在微博这种最大的社交媒体平台上，任何人都能发表自己的言论，只要不违反法律。
        在很多人所畅想的web3.0时代中，信息的交互被巨大的数据库所共享，每个人在虚拟的世界都有自己的身份，用虚拟的货币进行交易。在那个世界之中，信息不再被局限在一个个APP里面，而是在整个互联网的世界里面交互，每个人的喜好都会被精确的定义，效率被无限的提高，人工智能将会帮助我们寻找信息，推送信息。看起来这是一个高效获取信息的美好世界。
        真的是这样吗？
        “历史上精英们一直在试图让大众拥有很高的精神追求，但社会整体
      &lt;/p&gt;
      

    &lt;/div&gt;

  &lt;/Card&gt;

</div>

</template>
<script>

import { computed, watch } from '@vue/composition-api'

import scrollHook from '@/hooks/scrollHook'
export default {
setup(){

const [ state, element ] = scrollHook()

const scrollY = computed(() => state.value.top)

watch(() => scrollY.value, (val) => {

if(val < 500) return

console.log('loading ...')

} )
return {
  
  element,
  state
  
}

}
}

</script>

import { ref, watch, computed } from '@vue/composition-api'

/**


@param { dom ref } initDom 初始 dom
@returns { [ state, element ] } state 数据对象  element dom挂载ref

@example

setup

const [ state, element ] = scrollHook()
const loadMore = () => {....}
const scrollY = computed(() => state.value.top)
watch(() => scrollY.value, (val) => {
if(val < 500) return
loadMore()
}


模板

<div class='contaier' ref='element' >
....
</div>



*/

export default function scrollHook(initDom={}){
const element = ref(null)

const state = ref({
    left: NaN,
    top:  NaN,
})

const targetElement = computed(() =&gt; initDom.value || element.value)

function updatePositon(target){

    
    if(target === document){
        target = document.scrollingElement
        if(!target) return;
    }

    state.value = {
        left: target.scrollLeft,
        top: target.scrollTop
    }
    
}

function listener(event){
    if(!event.target) return
    updatePositon(event.target)
}


watch(() =&gt; targetElement.value, (val, oldVal) =&gt; {

    if(oldVal){
        oldVal.removeEventListener(&#39;scroll&#39;,  listener)
    }

    if(val){
        console.log(val)
        val.addEventListener(&#39;scroll&#39;, listener)
    }
    
})


return [ state, element ]

}