Question

一切正常，除了滚动，当我单击到下一个元素时会滚动，但出于查看目的没有向下滚动，我必须向下滚动。我尝试了许多方法，但无法解决，请帮助我解决该问题，我通过此链接https://www.npmjs.com/package/angular-shepherd但没有选择。如果有人可以帮助我，那对我将是极大的帮助。

<h2 class="second-element">London</h2>

<p class="third-element">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<div class="first-element">cool</div>

我已经在我的app.component.ts文件代码中添加了它。

import { ShepherdService } from 'angular-shepherd';


export class AppComponent implements AfterViewInit {
  constructor(private shepherdService: ShepherdService) { }

  ngAfterViewInit() {

    this.shepherdService.disableScroll = true;
    this.shepherdService.modal = true;
    this.shepherdService.confirmCancel = false;
    this.shepherdService.addSteps([
      {
        id: 'intro',
        options: {
          attachTo: '.first-element bottom',
          beforeShowPromise: function() {
            return new Promise(function(resolve) {
              setTimeout(function() {
                window.scrollTo(0, 0);
                resolve();
              }, 500);
            });
          },
          buttons: [
            {
              classes: 'shepherd-button-secondary',
              text: 'Exit',
              type: 'cancel'
            },
            {
              classes: 'shepherd-button-primary',
              text: 'Back',
              type: 'back'
            },
            {
              classes: 'shepherd-button-primary',
              text: 'Next',
              type: 'next'
            }
          ],
          classes: 'custom-class-name-1 custom-class-name-2',
          highlightClass: 'highlight',
          scrollTo: true,
          showCancelLink: true,
          title: 'Welcome to Rivet Labs',
          text: ['This will help you toggle sidebar menu'],
          when: {
            show: () => {
              console.log('show step');
            },
            hide: () => {
              console.log('hide step');
            }
          }
        }
      },
      {
      here is 2nd id goes here 
      },
      {
      here is 3rd id goes here
      }
}

Answer 1

我已经解决了我的问题，只是我们需要从下一个id中删除滚动功能才能到达默认位置的元素。我们必须删除此属性// beforeShowPromise：function（）{} //作为下一个ID。

     beforeShowPromise: function() {
        return new Promise(function(resolve) {
          setTimeout(function() {
            window.scrollTo(0, 0);
            resolve();
          }, 500);
        });
      },

角牧羊犬导游在下一页上未滚动

1 个答案: