首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在android蜂窝webview/webkit中实现水平/垂直手指滑动滚动?

在 Android 蜂窝 Webview / WebKit 中实现水平/垂直手指滑动滚动,可以通过以下步骤实现:

  1. 监听手指触摸和滑动事件

在 Webview 或 WebKit 中,可以使用 onTouchListeneronScrollChanged 监听手指触摸和滑动事件,例如:

代码语言:txt
复制
webView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // 手指触摸事件
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            // 记录手指初始位置
            fingerStartX = event.getX();
            fingerStartY = event.getY();
        } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            // 计算手指移动的距离
            float deltaX = event.getX() - fingerStartX;
            float deltaY = event.getY() - fingerStartY;

            // 判断手指滑动的方向
            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                // 手指向下滚动
                if (deltaX > 0) {
                    // 垂直滚动
                    if (webView.canScrollVertically(SCROLL_VERTICAL)) {
                        webView.scrollTo(0, fingerStartY - deltaY);
                    }
                } else {
                    // 水平滚动
                    if (webView.canScrollHorizontally(SCROLL_HORIZONTAL)) {
                        webView.scrollTo(fingerStartX - deltaX, 0);
                    }
                }
            } else {
                // 手指向左滚动
                if (deltaY > 0) {
                    // 垂直滚动
                    if (webView.canScrollVertically(SCROLL_VERTICAL)) {
                        webView.scrollTo(0, fingerStartY - deltaY);
                    }
                } else {
                    // 水平滚动
                    if (webView.canScrollHorizontally(SCROLL_HORIZONTAL)) {
                        webView.scrollTo(fingerStartX - deltaX, 0);
                    }
                }
            }
        }
        return false;
    }
});
  1. 设置 Webview 或 WebKit 的滚动属性

在 Android 中,可以使用 WebSettings 对象来设置 Webview 或 WebKit 的滚动属性,例如:

代码语言:txt
复制
WebSettings settings = webView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
  1. 设置 Webview 或 WebKit 的属性

在 Android 中,可以使用 WebSettings 对象来设置 Webview 或 WebKit 的属性,例如:

代码语言:txt
复制
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setSupportMultipleWindows(true);
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
  1. 滚动 Webview 或 WebKit

在 Android 中,可以使用 WebSettings 对象来滚动 Webview 或 WebKit,例如:

代码语言:txt
复制
WebSettings settings = webView.getSettings();
settings.setSupportScrollGestures(true);
  1. 监听 Webview 或 WebKit 的滚动事件

在 Android 中,可以使用 WebSettings 对象来监听 Webview 或 WebKit 的滚动事件,例如:

代码语言:txt
复制
WebSettings settings = webView.getSettings();
settings.setSupportScrollGestures(true);
settings.setScrollGesturesEnabled(true);

以上是 Android 中实现 Webview / WebKit 水平/垂直手指滑动滚动的步骤,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2016.06 第三周 群问题分享

JavaScript audio元素和video元素iOS和Android无法自动播放 2016.06.20~2016.06.24 核心内容 HTML5视音频 参考答案 音频,写法一 <audio...及Android上无法使用,PC端能够正常使用; 2.audio元素没有设置controls时,iOS及Android会占据空间大小,而在PC端Chrome浏览器是不会占据任何空间 移动端有哪些...touch事件 2016.06.20~2016.06.24 核心内容 touch事件 参考答案 当用户手指放在移动设备的屏幕上滑动会触发的touch事件; 以下支持webkit内核的浏览器: touchstart...不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。...通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动 MSPointerUp——当手指离开屏幕时触发 如何用jQuery实现两个

97090

开发 h5| Hybrid | 微信小程序 | 实践踩坑总结十六条

分析原因: iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。 效果如下: ?...-webkit-overflow-scrolling : touch 卡住不动问题 背景 ios页面向上向下滑动的过程,会出现卡顿,不流畅的现象,具体问题如下: 1 safari上,使用了-webkit-overflow-scrolling...(中招) 2 safari上,点击其他区域,再在滚动区域滑动滚动条无法滚动的(中招)。...解决这个问题之前,我们先理解-webkit-overflow-scrolling的两个属性 1 auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。...1 android问题:打开webview被微信拦截问题 背景 微信小程序里开发webview h5的时候,配置了合法域名,域名备案的情况下,出现了 ios 上正常打开,但是 android 手机上出现了被拦截的情况

2.3K30

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

由于篇幅原因,某些非核心解决方案的实现细节暂未谈论,需要自行研究。 iOS 滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。...产生原因 为什么 iOS 的 webview 滑动不流畅,它是如何定义的? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开,滚动会立即停止 */ 解决方案 1.滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...产生原因 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。 解决方案 1.

2.1K20

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

由于篇幅原因,某些非核心解决方案的实现细节暂未谈论,需要自行研究。 iOS 滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。...产生原因 为什么 iOS 的 webview 滑动不流畅,它是如何定义的? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开,滚动会立即停止 */ 解决方案 1.滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...产生原因 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。 解决方案 1.

1.2K30

收藏 | 移动端H5开发常用技巧总结

; } iOS 滑动不流畅 ios 手机上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。...「解决方案」 滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...ontouchend onclick audio 和 video ios 和 andriod 自动播放 这个不是bug,由于自动播放网页的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,...手指按住屏幕上拉,底部多出一块白色区域。 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。...如果该元素已经浏览器窗口的可见区域内,则不会发生滚动。 true,则元素将在其所在滚动区的可视区域中居中对齐。 false,则元素将与其所在滚动区的可视区域最近的边缘对齐。

4.2K20

12个关于移动 H5 开发的采坑问题汇总

由于篇幅原因,某些非核心解决方案的实现细节暂未谈论,需要自行研究。 iOS 滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。...产生原因 为什么 iOS 的 webview 滑动不流畅,它是如何定义的? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /*...当手指从触摸屏上移开,滚动会立即停止 */ 复制代码 解决方案 1.滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper...产生原因 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。 解决方案 1.

1.5K20

挥别web移动端开发差异和经典坑

; } iOS滑动不流畅 描述:ios 手机上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。...滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置overflow : 设置外部 overflow 为 hidden.... auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...手指按住屏幕上拉,底部多出一块白色区域。安卓无此特性。 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。

2.8K20

移动端必备的H5问题及解决方案

整体表现就是滑动不流畅,没有滑动惯性。 产生原因 为什么 iOS 的 webview 滑动不流畅,它是如何定义的?...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开...,滚动会立即停止 */ 解决方案 1.滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper { -webkit-overflow-scrolling...产生原因 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。...很容易想象,我需要touchmove滑动时候,优先触发了touchstart的点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动的情况下,还是建议使用 click 处理。

4.3K42

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

由于篇幅原因,某些非核心解决方案的实现细节暂未谈论,需要自行研究。 iOS 滑动不流畅 表现 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。...产生原因 为什么 iOS 的 webview 滑动不流畅,它是如何定义的? 最终我 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ 解决方案 1.滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling...产生原因 iOS 手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。 解决方案 1....很容易想象,我需要touchmove滑动时候,优先触发了touchstart的点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动的情况下,还是建议使用 click 处理。

1.3K22

嵌套滑动通用解决方案--NestedScrollingParent2

京东首页 可见,向上滑动页面时,当tabLayout滑动到顶部时,外层RecyclerView停止滑动,此时tabLayout即为吸顶状态,接着会 滑动ViewPager的内层RecyclerView...按分析的view结构直接实现 可见,tabLayout是吸顶状态,无法继续滑动内层RecyclerView(抬起手指继续滑也不行)。(点击查看相关代码) 那么该咋办呢?...这是可行的,但是tabLayout滑动到顶部后,必须抬起手指,重新滑动,内层RecyclerView才能继续滑动。这是为啥呢?...* @param dx 水平方向嵌套滑动的子View想要变化的距离 * @param dy 垂直方向嵌套滑动的子View想要变化的距离 dy0 向上滑动...* @param dx 水平方向嵌套滑动的子View想要变化的距离 * @param dy 垂直方向嵌套滑动的子View想要变化的距离 dy0 向上滑动

3.6K31

Android 类似UC浏览器的效果:向上滑动地址栏隐藏功能

思路要求 ScrollView 嵌套 地址栏 和 WebView 手指滑屏向下滚动(网页向上),如果网页有滚动条,首先把 地址栏 滚动到消失,然后 WebView 才开始滚动手指滑屏向上滚动(网页向下..., WebView 的 onTouchEvent 事件根据具体情况决定是把 MotionEvent.ACTION_MOVE 事件传送给 ScrollView 还是留给自己 由于MotionEvent.ACTION_MOVE...事件传送给 ScrollView 后无法一次 Touch 事件再接收,所以会导致如果有地址栏,向下滑动第一次只能滑动到 ScrollView 消失 + Hack网页,加入JS脚本,前行让网页顶部空出来一段空白...,空白处覆盖地址栏 优点是WebView大小不变化,容易控制 缺点是比较复杂要处理各种网页元素,各种 position 情况,实现复杂,效率低 由手势接管所有触发操作,再由它分发给需要滚动的控件 本文方法...GestureDetector 逻辑分发 – 决定是滑动webview还是改变webview高度从而改变ScrollView滚动范围(ScrollView总是滚动到最底) WebView 重画之后检测当前地址栏偏移

1.5K20

android仿知乎ScrollView滚动改变标题栏透明度

刷知乎的时候看到,专题栏里面 往下滚动标题栏会由透明逐渐变蓝色,觉得这个效果不错,就想自己写一下 这是自己实现的效果图: ?...说下实现思路: 1、先获取顶部图片的高度height,这个有3种方式获取,我用的是监听onGlobalLayout方法的回调 2、监听scrollview的滚动坐标,原生的没有这个监听,需要我们自己写个...android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.webkit.WebSettings; import android.webkit.WebView...; import android.webkit.WebViewClient; import android.widget.ImageView; import android.widget.ScrollView...android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** * 带滚动监听的

1.4K20

HorizontalScrollView扩展总结

ScrollView相信大家都已经比较熟悉了,它是支持垂直滚动的,开发中经常使用到,与垂直滚动相对的就是水平滚动HorizontalScrollView,有时我们进行页面切换的时候也会用到HorizontalScrollView...在说扩展之前,我先说一下HorizontalScrollView的特点 (1) 支持水平滚动 (2) 和ScrollView一样,它只包括一个子View,通常是用LinearLayout作为它的子View...,而不能手势滑动) (2) 也支持手势滑动 (3) 支持滑动的监听(滑动动作完成后才去更新步骤状态) 主要实现过程: (1) 继承HorizontalScrollView (2) 增加自定义方法public...android.widget.OverScroller; /** * 水平滚动条 * (1)可设置是否允许手势触摸滚动(默认是支持手势触摸滚动的) * (2)支持滚动状态监听 *...*/ public final static int SCROLL_STATE_IDLE = 0; /** * 滚动状态: 手指拖动滚动 */ public final static int

76610

进入移动Web世界

; } .son1{ flex: 1; } .son2{ flex: 3; } .son3{ width: 100px; } flex水平垂直居中 .parent...触摸事件 事件 触发情况 备注 touchstart 手指触摸屏幕触发 已有手指放在屏幕上则不触发 touchmove 手指在屏幕上滑动 连续触发 touchend 手指离开屏幕时触发 / touchcancel...每个touch对象包含属性 clientX:触摸目标视口中的横坐标 clientY:触摸目标视口中的纵坐标 identifier:标识触摸的唯一id pageX:触摸目标页面的横坐标(含滚动)...pageY:触摸目标页面的纵坐标(含滚动) screenX:触摸目标屏幕的横坐标 screenY:触摸目标屏幕的纵坐标 target:触摸的DOM节点的目标 d....相关bug Android,某些版本只会触发一次touchstart和一次touchmove,不会触发touchend。

1K20

HTML5移动端开发的常用触摸事件

iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。...触摸事件(touch)会在用户手指放在屏幕上面的时候、屏幕上滑动的时候或者是从屏幕上移开的时候出发。...下面具体说明:   touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。   touchmove事件:当手指在屏幕上滑动的时候连续地触发。...关于这个事件的确切出发时间,文档并没有具体说明,咱们只能去猜测了。   上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有DOM规范定义,但是它们却是以兼容DOM的方式实现的。...(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标

1.6K10

Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )

) 博客完成了图像的区域解码 , 并显示界面 ; 本篇博客主要完成长图滑动功能 , 触摸滑动 , 惯性滑动 , 操作 ; 一、GestureDetector 创建与设置 ---- 1 ...., 此时手指没有离开屏蔽 * * 随着滚动 , 改变图片的解码区域 ; * * @param e1 滑动的起始按下事件 DOWN 事件 * @param...触摸滑动操作 : ① onScroll 方法 : 触摸滑动主要在 GestureDetector.OnGestureListener 监听器的 onScroll 方法实现 , 该方法是触摸滑动事件...代码示例 /** * 手指滑动事件, 此时手指没有离开屏蔽 * * 随着滚动 , 改变图片的解码区域 ; * * @param e1 滑动的起始按下事件..., 此时手指没有离开屏蔽 * * 随着滚动 , 改变图片的解码区域 ; * * @param e1 滑动的起始按下事件 DOWN 事件 * @param

1.5K22

移动端app开发问题及理解

ondrop 当被拖元素正在被拖放是运行的脚本 onmousewheel 当鼠标滚轮整被滚动时 onscroll 元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click...longTap 手指长按屏幕触发 singleTap 手指碰一下屏幕触发 doubleTap 手指双击屏幕触发 swip滑动类事件 swipe 手指在屏幕上滑动触发 swipeLeft 手指在屏幕上左滑触发...iPhone的UIWebView(iOS2.0-12.0 ),WKWebView(iOS8.0+,macOS10.10+),AndroidWebView WebView可以理解为手机应用运行和展示网页的界面和接口...我的理解WebView相当于一个中间层,h5和原生应用交互都是通过原生应用WebView,h5调用原生应用注入其中的原生对象的方法,原生应用调用h5暴露在该环境的JavaScript对象的方法,...实现指令和数据的传输。

3.8K10
领券