为何iview里的Anchor不会随滚动而移动？

Question

<template>
  <Row>
    <Col span="3">
      <TimeLine msg="Welcome to Your Vue.js App"></TimeLine>
    </Col>
    <Col span="21">
      <div class="helloworld">
        <Row type="flex">
          <Col span="3" order="1">
            <!-- <p class="yj">{{jh}}</p> -->
          </Col>
          <Col span="9" order="2">
            <p
              class="yj"
            >{{jh}} &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{zh}}站 &nbsp;&nbsp;{{qk}} &nbsp;&nbsp;{{cw}}</p>
            <br />
            <p class="cs">
              冲程：&nbsp;{{cc}} &nbsp;|&nbsp;&nbsp;冲次：{{cc1}}
              &nbsp;|&nbsp;&nbsp;泵径：{{bj}}&nbsp;|&nbsp;&nbsp;回压：{{hy}}
              &nbsp;|&nbsp;&nbsp;套压：{{ty}}
              <br />
              液量：{{rcyl1}}&nbsp;|&nbsp;&nbsp;油量：{{rcyl}}&nbsp;|&nbsp;&nbsp;含水：{{hs}}
            </p>
          </Col>
          <Col span="12" order="3">
            <br />
            <DatePicker
              type="daterange"
              @on-change="checkDate"
              v-model="dateValue"
              :editable="false"
              format="yyyy/MM/dd"
              split-panels
              :options="options1"
              placement="bottom-end"
              placeholder="选择日期"
              style="width:260px"
            ></DatePicker>
            <span>&nbsp; &nbsp;</span>
            <Tooltip content="请不要选择2011以前数据或超过当天" placement="top-start">
              <Button type="primary" @click="getDataByDate">选 择</Button>
            </Tooltip>
            <br />
          </Col>
        </Row>
        <br />
        <br />
        <Row type="flex">
          <Col span="2">
          
          
            <Anchor class="anchor" :affix="false" show-ink>
              <div class="anchor">
                <AnchorLink href="#myChart" title="产量曲线" />
                <AnchorLink href="#yl" title="油量曲线" />
                <AnchorLink href="#hs" title="含水曲线" />
                <AnchorLink href="#dl" title="平衡率曲线" />
                <AnchorLink href="#dlsx" title="上行电流曲线" />
                <AnchorLink href="#dlxx" title="下行电流曲线" />
                <AnchorLink href="#hy" title="回压曲线" />
              </div>
            </Anchor>
            
            
            
            
          </Col>
          <Col span="22">
            <div id="zhqx" :style="{width: '780px', height: '450px',margin: 'auto'}"></div>
            <br />
            <div id="myChart" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="yl" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="hs" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="dl" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="dlsx" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="dlxx" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
            <div id="hy" :style="{width: '750px', height: '450px',margin: 'auto'}"></div>
          </Col>
        </Row>
      </div>
    </Col>
  </Row>
</template>

上面是vue页面template内容 其中Anchor 的内容无论我怎么滚动就是不移动
以下是style

.anchor {
  /* padding-right: 10%; */
  /* position: fixed; */
  z-index: 2;
  cursor: pointer;
  /* top: 130px; */
}

是不是哪出现错误了？

Answer 1

后来检查是个Bug，因为框架结构原因！

Answer 2

anchor标签内添加container属性.
先把需要滚动的大元素添加个class=“app-content”
然后：
<Anchor class="anchor" :affix="false" container='.app-content' show-ink>

Answer 3

请问一下这个问题解决了吗