使用 typeScript 滚动到我的 webView 上的 x,y 坐标

Posted 2023-03-13

【中文标题】使用 typeScript 滚动到我的 webView 上的 x,y 坐标

【英文标题】：Scroll to an x,y coordinate on my webView using typeScript

【发布时间】：2019-11-12 00:27:05

【问题描述】：

我正在我的应用程序中制作自定义地图。这本质上是一张大地图图像，我根据 GPS 位置将小头像图像移动到大地图图像上。

我允许用户在地图上滚动以查看屏幕外的地方。

我现在想添加一个按钮，让用户回到他们的位置。但它不起作用，我尝试使用：

  window.moveTo()
  window.scrollTo()

但什么也没发生。有人可以帮忙吗？

html

 <ion-content padding id=ionScroll scrollX="true" scrollY="true">

  <div id = "main" >
    <img class = "map"
    id = "map"
    src = "../../assets/img/limerickmap.JPG"
    alt = "map"/> 
    <img class = "avatar"
    id = "avatar"
    src = "../../assets/img/satan.png"
    alt = "avatar" />
  </div>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click) = "centreMap()">
      <ion-icon name="compass"></ion-icon>
    </ion-fab-button>
  </ion-fab>

   </ion-content>

打字稿

 ngOnInit() 
      ionScroll = window.document.getElementById("ionScroll");
 

 centreMap() 
     ionScroll.scrollTo(avatar.style.left , avatar.style.top);
     console.log("TEST scroll" +avatar.style.left+"  "+avatar.style.top)
 

【参考方案1】：

尝试设置id 不是我认为的正确方式。

Freaky Jolly 有一个tutorial explaining how to scroll to an X/Y coord。

首先，您需要scrollEvents 上的ion-content：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ion Content Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true">
  <div style="height: 50px;width:600px;" text-right>
    <ion-button (click)="ScrollToPoint(-300, -120)">
      Scroll To Point Right
    </ion-button>
  </div>
</ion-content>

在代码中您需要使用@ViewChild 来获取对ion-content 的代码引用，然后您可以使用它的ScrollToPoint() api：

import  Component, ViewChild  from '@angular/core';
import  IonContent  from '@ionic/angular';

@Component(
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
)
export class HomePage 
  @ViewChild(IonContent) content: IonContent;

  constructor(
  )
  

  ScrollToPoint(X,Y)
    this.content.scrollToPoint(X,Y,1500);
  

我已经简化了这篇文章，所以如果你想让它真正起作用，你需要添加一些内容来为页面添加滚动条。