移动端H5实现纵向滑动到顶部，能下拉出来一个页面，并且根据内容自适应高度
漆雕硕
需求： 移动端H5页面实现下拉顶部页面，出现一个开屏广告页面，类似于百度APP下拉出现一个 服务中心
- 利用定位和touchs事件实现
页面HTML
<div class="divModel">
<div class="div">
<div class="container">
<p>啦啦啦啦</p>
<p>啦啦啦啦</p>
<p>啦啦啦啦</p>
<p>啦啦啦啦</p>
<p>啦啦啦啦</p>
<p>啦啦啦啦</p>
<button id="btn">点击滑动这个按钮</button>
</div>
</div>
</div>
<div class="main" id="mainPage">
<p>top主页内容</p>
<p>top主页内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
<p>主页面内容</p>
</div>片
样式CSS
<style>
*{
padding: 0;
margin: 0;
}
body{
position: relative;
}
.div{
width: 100%;
height: 100%;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.main{
width: 100%;
height: 100px;
background: #fff;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
#box
{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}
.divModel{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.container{
width: 100%;
height: 100%;
background: #ddd;
position: absolute;
top: 0;
left: 0;
overflow: scroll;
z-index: 99;
}
</style>
JS
<script>
var height = $('.divModel').outerHeight(true)
console.log(height)
$('.divModel').css({
'top':'-'+height+'px'
})
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
varresult = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
}
//滑动处理
var startX, startY;
var fangxiang;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
//手指在屏幕滑动
document.addEventListener("touchmove", function(e){
var height = $('.divModel').outerHeight(true)
var t = document.documentElement.scrollTop || document.body.scrollTop;
var movex, movey;
movex = e.touches[0].pageX - startX;
movey = e.touches[0].pageY - startY;
console.log(movey)
if(t == 0 && fangxiang=='up'){
console.log("向下");
$('.divModel').css({
'top':'0px',
'transition':' all .5s'
})
}
console.log(fangxiang)
console.log("手指不动发生")
}, false);
var fangxiang = ''
document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
var t = document.documentElement.scrollTop || document.body.scrollTop;
switch(direction) {
case 0:
console.log("没滑动");
break;
case 1:
console.log("向上");
break;
case 2:
fangxiang = 'up'
break;
case 3:
console.log("向左");
break;
case 4:
console.log("向右");
break;
default:
}
}, false);
var startX1, startY1;
document.getElementById('btn').addEventListener("touchstart", function(e){
startX1 = e.touches[0].pageX;
startY1 = e.touches[0].pageY;
console.log("start:"+startX1 + "," +startY1);
}, false);
document.getElementById('btn').addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
console.log("end:"+endx + "," +endy);
}, false);
//手指在屏幕滑动
document.getElementById('btn').addEventListener("touchmove", function(e){
var movex, movey;
movex = e.touches[0].pageX - startX1;
movey = e.touches[0].pageY - startY1;
console.log("move:"+movex + "," +movey);
// console.log("滑动了…………")
$('.divModel').css({
'top':'-'+height+'px',
'transition':' all .5s'
})
// document.documentElement.scrollTop = 0
// document.body.scrollTop = 0
}, false);
// 监听页面滚动到底部
var _this = document.querySelector('.container');
_this.addEventListener('scroll' , function(){
viewH = _this.clientHeight
contentH =_this.scrollHeight,//内容高度
scrollTop =_this.scrollTop;
//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
console.log('现在百分比是： ', scrollTop/(contentH -viewH))
console.log('滚动到底部')
}
})
</script>
缺点： 效果没有APP好 可能会比较生硬 没有那么流畅 视觉上面没有那么好
- 利用swiper插件实现
HTML页面
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="blue">Slide 1</div>
<div class="swiper-slide" id="green">Slide 2
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p><p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
<p>几天几天几天监听</p>
</div>
</div>
</div>
CSS样式
<style>
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
#blue{
width:100%;
background-color: pink;
}
#green{
width:100%;
overflow:auto;
}
</style>
JS代码段
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
initialSlide:1,//默认展示第2页面
// effect: 'coverflow',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
// 内容长度大于手机屏幕时，让内容能滚动查看
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function (e) {
startScroll = this.scrollTop; //当前获取滚动条顶部的偏移
touchStart = e.targetTouches[0].pageY; //手指触碰位置距离盒子顶部距离
}, true);
swiper.slides.on('touchmove', function (e) {
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
var slide = this;
var onlyScrolling =
( slide.scrollHeight > slide.offsetHeight ) &&
(
( touchesDiff < 0 && startScroll === 0 ) ||
( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||
( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )
);
if (onlyScrolling) {
e.stopPropagation();
}
}, true);
</script>
建议： 建议使用这个插件比较方便，而且滑动效果比较好 ，比较简单，好用
类似资料：