<script setup>
function handleSelect(e, preHash) {
  e.preventDefault();
}
</script>

<template>
  <div class="flex wrap" id="wrap">
    <div class="map">
      <div id="basic" class="sub flex-center">
        Basic
        <p>点击我开始滚动</p>
      </div>
      <div id="line-less" class="sub flex-center">
        LineLess Mode
      </div>
      <div id="affix" class="sub flex-center">
        Affix
      </div>
    </div>
    <div class="right">
      <Affix :top="300">
        <KsAnchor :change-hash="false" scroll-container="#wrap">
          <KsAnchorLink href="#basic">Basic</KsAnchorLink>
          <KsAnchorLink href="#line-less">LineLess Mode</KsAnchorLink>
          <KsAnchorLink href="#affix">
            Affix
          </KsAnchorLink>
        </KsAnchor>
      </Affix>
    </div>
  </div>
</template>

<style lang="less" scoped>
.vp-doc {
  .wrap {
    outline: 1px solid #666666;
    :deep(.arco-anchor) {
      ul {
        list-style: none;
        padding-left: inherit;
        margin: inherit;
      }
    }
  }
}
.vpc ul {
  list-style: none;
  padding-left: inherit;
  margin: inherit;
}
.vpc a {
  font-weight: inherit;
  text-underline-offset: inherit;
  touch-action: inherit;
}
.wrap {
  position: relative;
  height: 500px;
  overflow: auto;
}
.flex {
  display: flex;
  position: relative;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: bold;
}
.map {
  flex: 1;
}
.right {
  position: relative;
  //position: fixed;
  //right: 100px;
  flex: none;
  width: 300px;
}
.sub {
  height: 500px;
  margin-bottom: 30px;
}
</style>