splitpanes:实现同步滚动和固定/粘性标题

问题描述 投票:0回答:1
css vue.js vuejs2
1个回答
0
投票

查看此处可用的项目:https://github.com/vuejs/awesome-vue#scroll 看起来 vue-scroll-sync 就是这么做的。


更新:尝试了一段时间后,我没有让它正常工作......

这就是我走了多远但没有成功

<template>
  <div style="display: flex">
    <scroll-sync :vertical="true">
      <div
        style="width: 100px; height: 600px; overflow: auto; background: teal"
      >
        Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
        id velit ac diam pretium cursus. Aliquam sagittis magna non ante
        vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet
        scelerisque lobortis, neque ex cursus velit, sed sodales urna nibh
        tempor urna. Aliquam erat volutpat. Nam sit amet arcu at mauris
        fringilla accumsan sit amet ac mi. Mauris consectetur est ligula, eu
        tristique nibh sollicitudin in. Sed malesuada neque ut ante ultrices
        malesuada. Curabitur imperdiet neque quis est sodales, id pellentesque
        nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
        pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
        eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
        felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
        gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
        viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
        ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
        ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
        finibus id risus.
      </div>
    </scroll-sync>
    <scroll-sync :vertical="true">
      <div style="width: 100px; height: 300px; overflow: auto; background: red">
        Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
        id velit ac diam pretium cursus. Aliquam sagittis magna non ante
        vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet s
        nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
        pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
        eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
        felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
        gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
        viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
        ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
        ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
        finibus id risus.
      </div>
    </scroll-sync>
  </div>
</template>

<script>
export default {
  components: {
    [process.client && 'ScrollSync']: () => import('vue-scroll-sync'),
  },
}
</script>

由于维护者没有更多详细信息,我不知道如何更好地联系他。


TLDR:不幸的是,我想有人需要手动实现该功能。

© www.soinside.com 2019 - 2024. All rights reserved.