精华内容
下载资源
问答
  • 做微信手机端开发,有时候页面内容一屏就能显示下,这样的情况下就需要页面能上下滑动,解决办法记录如下: 安卓手机:只需添加样式即可: body, html {  position: fixed;  top: 0px;  bottom: 0px;  width:...

    做微信手机端开发,有时候页面内容一屏就能显示下,这样的情况下就不需要页面能上下滑动,解决办法记录如下:

    安卓手机:只需添加样式即可:

    body, html {
      position: fixed;
      top: 0px;
      bottom: 0px;
      width: 100%;
      height: 100%;
    }

    苹果手机需要监听touchmove事件

    <script type="text/javascript">
      document.body.addEventListener("touchmove",function(event){
        event.preventDefault();
      });
    </script>
    展开全文
  • 不少人反馈用了这个组件之后不能滑动,其实是样式没有写好。 按照上面的布局,你的样式应该包含下面这段: html, body { width: 100%; height: 100%; } #container { height: 100%; } 实例化组件 var list =...
  • 在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】我的方案是,通过监听滑动,阻止默认事件来完成 div.addEventListener('...这样,左右滑动可以完成了,但是触摸这个div的时候,页面不能上下滑动了,怎...

    在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】
    我的方案是,通过监听滑动,阻止默认事件来完成

    div.addEventListener('touchmove',function(event){
        event.preventDefault();//阻止浏览器的默认事件
    })
    

      

    这样,左右滑动可以完成了,但是触摸这个div的时候,页面不能上下滑动了,怎么办?

    当touchmove的时候,实时改变window的scrolltop值?

    这样会有原生的滑动效果吗?

    大家有什么解决方案

    问题已经解决了,思路是

    var xx,yy,XX,YY,swipeX,swipeY ;
     div.addEventListener('touchstart',function(event){
         xx = event.targetTouches[0].screenX ;
         yy = event.targetTouches[0].screenY ;
         swipeX = true;
         swipeY = true ;
     })
     div.addEventListener('touchmove',function(event){
          XX = event.targetTouches[0].screenX ;
          YY = event.targetTouches[0].screenY ;
          if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑动
          {
              event.stopPropagation();//组织冒泡
              event.preventDefault();//阻止浏览器默认事件
              swipeY = false ;
              //左右滑动
          }
          else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑动
              swipeX = false ;
              //上下滑动,使用浏览器默认的上下滑动
          }
      })
    

      

    可以判断下move大概方向,然后水平的时候阻止默认行为,其他时候不阻止就OK了

     

    其实 单纯判断move是水平也是不行的,如果用户是斜上地滑怎么判断?

    我的想法是,在这个轮播上实现这样的一个覆盖层

    HTML5 移动端的上下左右滑动问题

    当用户从A触发了touchstart 结束或者move到b,或者b start,在c上结束,判定为右滑。左滑则相反。

    转载于:https://www.cnblogs.com/pingfan1990/p/5447404.html

    展开全文
  • web页面采用html5技术实现,在系统登录页面中使用frameset、frame来嵌套另一个页面,结果当android2.3移动设备访问该页面时触摸屏不能上下滑动页面。 解决方法 1.首先将该页面简单化,去掉frame相关标签,结果...

    问题描述

    web页面采用html5技术实现,在系统登录页面中使用frameset、frame来嵌套另一个页面,结果当android2.3移动设备访问该页面时触摸屏不能上下滑动页面。

    解决方法

    1.首先将该页面简单化,去掉frame相关标签,结果可以滑动页面,但是根据系统设计需要,frame相关标签不能去掉;

    2.折腾很久未果,最后发现代码里有viewport的注释痕迹,于是尝试使用html5的viewport,查找viewport的使用方法,并根据需要适当修改其中的一些参数如下,结果很令人满意,问题解决了。

    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    viewport 语法介绍:

    <!– html document –>
    <meta name=”viewport”
    content=”
    height = [pixel_value | device-height] ,
    width = [pixel_value | device-width ] ,
    initial-scale = float_value ,
    minimum-scale = float_value ,
    maximum-scale = float_value ,
    user-scalable = [yes | no] ,
    target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
    />

    target-densitydpi

    —-一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

    什么是Viewport

    手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

    关于viewport的一些问题

    viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。比如,你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2,虽然设备的分辨率不同,物理尺寸也不同,但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说,你的网站是800px宽,你可以通过设置viewport的width=800,来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。

    以上的知识,相信每个对viewport稍有了解的同学应该都已经了解了。这不是我今天想说的重点。我想说明的是viewport在ios和android上的一些差异表现。

    网上一搜关于viewport的知识,基本上全都是如下信息:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一都主流的web app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。玩ps的同学应该都知道,当你将一张1000 * 1000的图片直接缩放至500 * 500分变成什么样,对吧?图片的失真一定逃不掉。


    但我要做的一个应用却恰恰相反,需要利用viewport,利用缩放。不论真实分辨率是多少,无论物理尺寸是多少,我都希望在浏览器里,能有统一的分辨率,同时也不允许用户缩放。我用来测试的设备有:iphone4、ipad2、htc的g11、不知道什么厂商的aquos phone(android系统)、华硕的android pad、dell的winphone然后我一路遇到了如下问题:


    1)如果不显示地设置viewport,那么width的默认为980。如果页面的所有元素宽度都小于980,此时width为980,如果页面最宽的位置超过980,那么width等于最大宽度。总之,默认能将整个页面从左到右显示出来。如果设置了viewport,比如,只单纯地设置了user-scalable=no,例如<meta name="viewport" content="user-scalable=no" />,那么ios下width还是按980显示(即默认就会通过dpi缩放),但android和winphone下却不会再缩放了,浏览器分辨率和真实设置分辨率一致。


    2)对于ios设备,设置width可以生效,但对于android,设置width并不会生效。ios设备,缩放的比率即dpi是通过你设置的width和设置真实分辨率自动计算的,而android下你设置width无效,你能设置的是一个特殊的字段target-densitydpi,关于target-densitydpi可以参考一下这篇文章:http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。也就是说,有三个变量:浏览器width、设备真实width、dpi。 我们简单地用个公式来表达它们之间的关系吧(并非真实关系,简单说明用) 设备真实width * dpi = 浏览器width,这里的三个变量,设备真实width是个我们不能操作的已知值,另外两个变量我们可以设置一个来影响另一个,在ios中,我们能改的是浏览器width,dpi自动生成,而在android中,我们能改的是dpi,浏览器width自动生成。对于android,无论我们如何设置width,也不会对浏览器width产生影响。

    ps:这里我另外再说一个奇怪的问题:在htc的g11里(htc的手机我只有这一个,别的没有测),如果设置了dpi而不显示地设置width,则user-scalable=no不生效,即是说:<meta name="viewport" content="target-densitydpi=300,user-scalable=no" />,无法阻止用户缩放屏幕。我们需要显示地设置一下width值,仅管这个值对android下的浏览器分辨屏并不产生任何影响(对ios还是会产生影响的),我们仍然要设置它,而且这个值一定要大于320,如果小于等于320,也无法使user-scalable=no生效。这个问题只在htc的g11手机上出现,在aquos phone没有这个问题。兼容android真是件头痛的事 @_@,未来还不知道有多少坑呢。而在winphone上,结果就更奇怪了:我给viewport的width设一个大于480的值,user-scalable=no就失效了,而设一个小于480的值,user-scalable=no能生效。但无论我给viewport的width设多少值,对winphone真正显示的width却并不产生我预期的影响,通过target-densitydpi也没有影响。设置width,如果小于480的话,屏幕会缩放,但缩小的比例却和我预期完全不一样,我不知道它是按照什么规律缩放的。不知道这是winphone的问题,还是dell实现的问题。


    3)这一条和上一条应该是直接相关的:ios设备在横竖屏时,会自动调整dpi,无论横屏还是竖屏,都能保证浏览器width等于viewport中设置的值,所以横竖屏的时候,页面里显示的内容的大小是会自动缩放产生变化的。而android手机在横竖屏的时候,不会改变dpi,在横竖屏的时候,网页不会产生缩放。也正因此,ios可以保证横竖屏页面都不会产生滚动条,满屏显示,而android却无法保证这一点,横着满屏则竖着无法满屏,反之亦然。


    4)对于ios设备,如果width显示定义了,而页面最宽的位置超过width的话,width无效,仍按最宽的宽度来显示(不会有滚动条)。但此时会出现一个很奇怪的问题,当你将手机横竖屏切换几次之后,会发现你的页面自动放大了,出现了滚动条,但其实放大后的宽度其实和你设的width也并没有关系。为了防止这种情况出现,你需要将width的宽度设置得比页面最宽的地方更大,或者相同。


    原文出自:http://blog.csdn.net/wuruixn/article/details/8591989


    谢谢分享!!!


    展开全文
  • 但是我们项目中遇到一个问题:一个页面很大,有多个画廊控件,我们的页面很难上下滑动,滑动非常吃力,这是为什么呢?举个例子:如果你的页面放的全都是input输入控件,那么这个页面一样很难滑动,因为当我们在手机...

    混合app开发使用ionic框架的<ion-scroll>指令能够方便地实现水平滚动和垂直滑动。比如我们想实现一个能够水平滑动的画廊,可以使用下面这段代码。

    <html>
      <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    	<script src="jquery-1.11.1.min.js"></script>
        <script src="./1.1.1-release/js/ionic.bundle.js"></script>
    	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
    	<style>
    	/*nowrap不让img换行*/
    	.picturesholder{
    		background-color:#fff;
    		margin:20px;
    		width:400px;
    		height:80px;
    		overflow: hidden;
    		white-space: nowrap;
    	}
    	
    	/**图片占满画廊*/
    	.picturesholder img{
    		width:100px;
    		height:81px;
    	}
    	</style>
    
    	<script>
    	var testModule = angular.module('testApp', ['ionic']);
    	testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
    		$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"];
    	});
        
    	$(function(){
    		angular.bootstrap($("#body"), ["testApp"]);	
    	})
    	</script>
    </head>
    
    <body id="body" ng-controller="MyController">
      
    	<ion-header-bar class="bar-positive">
    		<h1 class="title">bar-positive</h1>
    	</ion-header-bar>
      
    	<ion-content class="has-header" style="background-color: #ebebeb;">
    	
    		<div class="picturesholder">
    			<ion-scroll direction="x">
    				<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
    			</ion-scroll>			
    		</div>
    		
    	</ion-content>
    	
    	<ion-footer-bar class="bar-balanced">
    		<div class="title">Footer</div>
    	</ion-footer-bar>
    </body>
    </html>
    
    	
    


    单看这一个水平画廊是没有什么问题的,功能和操作都很正常。但是我们项目中遇到一个问题:一个页面很大,有多个画廊控件,我们的页面很难上下滑动,滑动非常吃力,这是为什么呢?举个例子:如果你的页面放的全都是input输入控件,那么这个页面一样很难滑动,因为当我们在手机屏幕上滑动的时候,一不小心很容易就会点中这些输入框,当输入框获得焦点,页面就不能滑动了。使用<ion-scroll>一样有这个问题,当页面全是画廊控件的时候,滑动也十分费劲。


    从ionic文档中也没有找到好的解决办法,最后解决方法是:不使用<ion-scroll>指令,自己实现左右滑动。利用HTML5中的touchmove和touchstart事件实现滚动:

    // do for left-right scroll
    var startX = 0;
    var startY = 0;
    var $gallery = $(".picturesholder");
    
    $gallery.on("touchstart", function(e) {
    	 startX = e.originalEvent.changedTouches[0].pageX,
    	 startY = e.originalEvent.changedTouches[0].pageY;
    });
    
    $gallery.on("touchmove", function(e) {
    	var X = e.originalEvent.changedTouches[0].pageX - startX;
    	var Y = e.originalEvent.changedTouches[0].pageY - startY;
    	 
    	if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
    		var cur_scroll = $(this).scrollLeft();
    		$(this).scrollLeft(parseInt(cur_scroll) - X);
    		e.preventDefault();
    		e.stopPropagation();
    	}
    	else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
    		var cur_scroll = $(this).scrollLeft();
    		$(this).scrollLeft(parseInt(cur_scroll) - X);
    		e.preventDefault();
    		e.stopPropagation();
    	}
    	else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
    	}
    	else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
    	}
    	else{
    	}
    });
    // do for left-right scroll

    web浏览器没有上面2个事件,我们可以用mousedown和mousemove模拟,下面代码一样可以左右滑动。
    <html>
      <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    	<script src="jquery-1.11.1.min.js"></script>
        <script src="./1.1.1-release/js/ionic.bundle.js"></script>
    	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
    	<style>
    	/*nowrap不让img换行*/
    	.picturesholder{
    		background-color:#fff;
    		margin:20px;
    		width:400px;
    		height:80px;
    		overflow: hidden;
    		white-space: nowrap;
    	}
    	
    	/**图片占满画廊*/
    	.picturesholder img{
    		width:100px;
    		height:81px;
    	}
    	</style>
    
    	<script>
    	var testModule = angular.module('testApp', ['ionic']);
    	testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
    		$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"];
    	});
        
    	$(function(){
    		angular.bootstrap($("#body"), ["testApp"]);	
    		
    		// do for left-right scroll
    		var startX = 0;
    		var startY = 0;
    		var $pictures = $(".picturesholder");
    		
    		$pictures.on("mousedown", function(e) {
    			 startX = e.originalEvent.pageX,
    			 startY = e.originalEvent.pageY;
    		});
    		
    		$pictures.on("mousemove", function(e) {
    			var X = e.originalEvent.pageX - startX;
    		    var Y = e.originalEvent.pageY - startY;
    		     
    		    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
    		        var cur_scroll = $(this).scrollLeft();
    		        $(this).scrollLeft(parseInt(cur_scroll) - X);
    		        e.preventDefault();
    		        e.stopPropagation();
    		    }
    		    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
    		        var cur_scroll = $(this).scrollLeft();
    		        $(this).scrollLeft(parseInt(cur_scroll) - X);
    		        e.preventDefault();
    		        e.stopPropagation();
    		    }
    		    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
    		    }
    		    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
    		    }
    		    else{
    		    }
    		});
    		// do for left-right scroll
    	})
    	</script>
    </head>
    
    <body id="body" ng-controller="MyController">
      
    	<ion-header-bar class="bar-positive">
    		<h1 class="title">bar-positive</h1>
    	</ion-header-bar>
      
    	<ion-content class="has-header" style="background-color: #ebebeb;">
    	
    		<div class="picturesholder">
    			<!--<ion-scroll direction="x">-->
    				<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
    			<!--</ion-scroll>-->	
    		</div>
    		
    	</ion-content>
    	
    	<ion-footer-bar class="bar-balanced">
    		<div class="title">Footer</div>
    	</ion-footer-bar>
    </body>
    </html>
    
    	
    


    展开全文
  • 在移动端页面上,如果要实现【顶部轮播,手指触摸左右滑动】我的...//阻止浏览器的默认事件})这样,左右滑动可以完成了,但是触摸这个div的时候,页面不能上下滑动了,怎么办?当touchmove的时候,实时改变window...
  • DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Swiper demo&lt;/title&gt; &lt;meta...
  • 一切顺顺利利的写完之后,突然发现,点出弹窗之后,遮罩层下面的页面还是能上下滑动,那个头痛啊! 网上看了好多方法,因为说的不是很清楚,所以 也没起什么作用 最后,终于用如下的方法解决了:   1、把html、...
  • H5使用Swiper过程中遇到的滑动冲突

    千次阅读 2018-06-13 17:04:00
    (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到 二、解决问题 1.下面分先说css的问题,主要排查overflow:hidden; 检查也有一定的顺序,检查超出高度的标签是否用了overflow:hidden;最好先...
  • 一、问题(1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动(2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到二、解决问题1.下面分先说css的问题,主要排查overflow:hidden...
  • 一、问题(1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动(2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到二、解决问题1.下面分先说css的问题,主要排查overflow:hidden...
  • 先看图: ...当奖励层弹出来之后:1.index页面不能出现滚动条,2.index不能自动置顶,要停留在触发事件的位置。 2.解决方法: a.初始的css设置: html,body { width: 100%; height:100%; o...
  • 移动平台Html5的viewport使用经验

    千次阅读 2015-09-23 13:52:25
    web页面采用html5技术实现,在系统登录页面中使用frameset、frame来嵌套另一个页面,结果当android2.3移动设备访问该页面时触摸屏不能上下滑动页面。 解决方法 1.首先将该页面简单化,去掉frame相关标签,结果...
  • 学习html出现的问题。

    2018-04-03 15:27:45
    所以我只能用marquee 属性,制作了一个上下滑动页面。但是我不能为这个做任何的操作。到最就我才发现,我只是做了快速播放。并没有做快进的选项。左边的歌词不知道如何用js去控制出现和跟踪。还有换歌,等等一些...
  • 现在弹出模态框后,有时候模态框内容可以上下滑动, 有时候会滑动到整个页面。 试了网上的方法:给body或html加100%,不起作用 给模态框阻止事件冒泡:模态框也不能滑动了。 请教大神给解决...
  • 1.手机上打开有sliderjs的页面后, 切换到别的页面再回来时, sliderjs部分不能滑动了2.手机上打开有sliderjs的页面后, 在sliderjs部分不断的进行上下滑动时, 会出现空白的情况 html: 1 <div class="m-banner...
  • uni-app中的组件

    2020-10-15 09:20:56
    视图容器: view: 视图容器,类似于传统html中的div,用于包裹各种元素内容。 scroll-view: ...swiper下的每个swiper-item是一个滑动切换区域,不能停留在两个滑动区域之间。 表单组件: button: ...
  • 关于rem布局

    千次阅读 2015-09-09 10:55:22
    我们知道,当使用rem布局,并配合...但是对于一些需要布满一整屏的页面(比如现在流行的上下/左右滑动的那种),由于一个页面的元素必须在一个页面内布满,不能超出,那么问题就来了: 如果你是按照iPhone5的尺寸来
  • 17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出...
  • 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...
  • 阅读工具 开卷有益

    2012-03-31 14:07:03
    3、在屏幕左右侧上下滑动实时缩放图片 4、音量键放大缩小图片、上下键切换图片 ---------------------------------------------------------- 2、开卷如何使用外部字体字体? 按以下步骤: 1、将电脑上后缀名为...
  • 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

html页面不能上下滑动