我通过使用 Javascript 计算锚点的位置来工作WebView
然后以编程方式滚动NestedScrollView
通过调用自定义 URL 并使用WebViewClient
。以下是一些片段(我只垂直滚动,但您可以轻松地将其扩展为水平工作):
在您的 Activity 或 Fragment 中(其中NestedScrollView
and WebView
被引用):
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
if(url.startsWith("scrollto")) {
val offset = url.replace("scrollto://", "");
val offsetInt = MapUtils.getDensityIndependentPixels(offset.toFloat(), requireContext()).toInt()
(webView.parent as NestedScrollView).scrollTo(0, offsetInt)
return true
}
return false
}
}
//We need this, because the measured pixels in the WebView don't use density of the screen
fun getDensityIndependentPixels(pixels: Float, context: Context): Float {
return TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
pixels,
context.resources.displayMetrics
)
}
然后在你的Javascript中(或者<script>
- HTML 中的标签):
function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
top: rect.top + window.pageYOffset,
left: rect.left + window.pageXOffset
};
}
function makeItScroll(id) {
var element = document.getElementById(id)
var offsetTop = getOffset(element).top
window.location = "scrollto://"+offsetTop
}
最后在 HTML 中使用它,如下所示:
div
您想要滚动到:<div id="here">...</div>
a
滚动到那里:<a href="javascript:makeItScroll('here');">...</a>