首页
学习
活动
专区
工具
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视音频 参考答案 音频,写法一 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实现两个

98790

开发 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.5K30
  • 吃透移动端 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.3K30

    收藏 | 移动端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.7K31

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

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

    2.9K20

    移动端必备的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.8K42

    【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.4K22

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

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

    3.8K31

    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

    83210

    进入移动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.7K10

    移动端app开发问题及理解

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

    3.8K10

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

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

    1.6K22

    NestedScrolling机制之CoordinatorLayout.Behavior实战

    * child 使用此Behavior的View * directTargetChild 是target或是target的parent * target 处理滑动事件的view * axes 垂直滚动...2 横向滚动1 * type 滑动类型touch 0手指按下 1手指松开 */ public boolean onStartNestedScroll(@NonNull CoordinatorLayout...view处于滚动状态,但是并不是由target消耗的滚动时候触发,这个是水平滚动的实时距离 * dyUnconsumed view处于滚动状态,但是并不是由target消耗的滚动时候触发,这个是竖直滚动的实时距离...onNestedPreScroll():当我们滑动时候就会不断的调用这个方法,这也是我们实现各种效果的关键,我在这里做的最主要的就是各种滑动动画效果的实现,而效果无非就是放大,缩小,透明度,View的移动等...,在代码中结合着Scroller,onNestedFling赋一个结束值给Scroller,Scroller会不断产生中间值直到结束为止。

    89810

    移动端的touch事件处理

    在iPhone 3Gs发布的时候,其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后,Android上的浏览器也实现了相同的事件。...触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。...首先,先把滑动区域进行限制,此时的滑动区域值限制在页面中有边框的区域。...tap 事件的判定一个正确的 tap 事件应当满足一下条件:用户手指从屏幕移开时触发不能在用户移动手指时触发(防止和滚动、拖拽事件的冲突)多个手指同时触摸屏幕时不能触发不应该触发 click 事件具体实现代码可以参考...使用原生的滚动事件Android 4.0 以下是不支持原生的 webview 滚动的,所以只能使用 iscroll 之类的工具来模拟元素滚动。

    1.7K20
    领券