css文字超出滚动
- html
<div class="box">
<p class="animate">
君不见黄河之水天上来,奔流到海不复回,君不见高堂明镜悲白发,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月
</p>
</div>
- css
.box {
width: 300px;
margin: 0 auto;
position: relative;
border: 1px solid #ff6700;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #000;
display:inline-block;
white-space: nowrap;
animation: 5s wordsLoop linear infinite forwards;
}
@keyframes wordsLoop {
0% {
transform: translateX(0px);
}
100% {
/* translateX的值可根据实际情况调节*/
transform: translateX(calc(-100% + 280px));
}
}
移动端超出滚动scroll组件实现
- html
<div id="out">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
</div>
- css
#out {
width: 300px;
height: 150px;
padding:10px 0;
border:1px solid red;
overflow-x: scroll;
display: -webkit-box;
/*兼容ios允许独立的滚动区域和触摸回弹*/
-webkit-overflow-scrolling: touch;
}
#out::-webkit-scrollbar {
/* 隐藏滚动条 */
display: none;
}
.inner{
width: 200px;
height: 100%;
margin-right: 10px;
color: #fff;
font-size: 80px;
background: hotpink;
text-align: center;
line-height: 150px;
}
- 使用js赋予初始滑动距离
var box = document.getElementById('out');
//scrollTo的具体用法及传参请查看mdn文档
box.scrollTo({
left: 100,
top: 0,
behavior: 'smooth'//ios中设置behavior无效,具体版本请查看mdn
})
关于video标签在iso和安卓中的兼容处理
webkit-playsinline和 playsinline可以防止ios中视频播放时自动全屏
<template>
<video
id="video"
width="100%"
height="100%"
:src="videoUrl"
:poster="poster"//封面图
:autoplay="autoplay"
webkit-playsinline
playsinline
controls
preload
controlslist="nodownload" //禁止播放控件的下载功能
oncontextmenu="return false">
<source :src="videoUrl" />
</video>
</template>
- 在安卓apk的webview中,video的api播放方法(document.getElementById(‘video‘).play())不能主动触发,只能用户交互(元素的click,touch事件)后触发有效
vue单页面应用在ios中返回白屏
-
问题描述:
进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决
-
原因分析
在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得遮住,触发轻点击,方可消除遮罩
解决方案实现原理:
html,body都是100%,#app撑起了父元素的告诉,但是浏览器默认的滚动scroll并不是#app,而是body,某些因素,造成返回history 后,无法复原(ios 的锅),为此,我们将#app 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题- 代码实现
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#app {
width: 100%;
height: 100%;
background: #fff;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
left: 0;
top: 0;
}
webview中使用H5调用微信支付返回问题
-
问题描述
A页面-->微信支付页面-->支付成功redirect_url指定的页面--->按返回键-->再次进入微信支付页面(bug)--->返回进入A页面在跳转微信支付地址时,如果加入redirect_url返回地址,则回退的时候会再次经过支付地址页面,如要解决,请不要增加rediect_url