最近工作遇到的问题，用vue写的，有一个锚点的效果，刚刚开始用的是锚点做的，效果做的不是很好，主要是因为，锚点切换，我不能监控锚点的变化，从而修改我的tab切换栏的样式。超级简单的问题，一时间没有想到，真郁闷
刚开始的时候，用offsetTop，但是滚动打的时候，offsetTop的值一直木有变化，我还以为是offsetTop我用错了，查了一些资料，才知道把这个属性理解错了。发现自己的思路也有些问题，后来就换了一种方法。以后记好了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>锚点</title>
<style>
#container{
100%;
height: 2000px;
}
#box1,#box2{
100%;
height: 500px;
background: green;
}
#box2{
background: yellow;
}
#header{
position: fixed;
top:0px;
100%;
height: 200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="header"><input type="button" id='handleClick' value='click'></div>
<div id="container">
<div id="box1"></div>
<div id="box2"> </div>
</div>
<script>
document.getElementById('handleClick').onclick=function(){
var box1 = document.getElementById('box1').offsetHeight;
animation(box1);
}
function animation(target){
var timer=setInterval(a,30);
function a(){
var speed =Math.ceil((target - document.body.scrollTop)/3);
if(document.body.scrollTop >= target){
clearInterval(timer);
}else{
document.body.scrollTop = document.body.scrollTop + speed;
}
}
}
</script>
</body>
</html>
//滚动条消失
.container::-webkit-scrollbar {
0px;
height:0px;
}
/*去掉input默认样式*/
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
//去除输入框默认的记录
<input id="position-search" class="position-search"
autocomplete="off"//这句重点
type="search" placeholder="输入职位名称进行查询"
v-model="positionName" @keyup.enter="getPositionSearch" @click.stop="getInfoSearch($event)">
//去除 textarea 的右下角的角标
.textarea{
100%;
min-height: 3.2rem;
background: rgba(29,29,38,0.05);
resize : none; //这句重点
}
//js 获取系统 rem 对应的 px 的值
var fontSize = parseFloat(window.getComputedStyle(document.documentElement)["fontSize"])
//去除 ios下 textarea 默认的阴影
-webkit-appearance: none;
//iso下 捕捉焦点
textarea_value_click: function (e) {
this.ifshow = !this.ifshow;
textarea_value_element = $(e.target);
$('#textarea_area').show().focus();
if (this.textarea_value == '请填写') {
this.textarea_value = '';
}
},
//初始化地点使用方式
initUse_method: function () {
var that = this;
$('#use_method').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.use_method = text;
}
});
$('#quantity').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.quantity = parseInt(text);
}
});
$('#get_method').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
that.use_method_ifShow = false;
if (text == '本地印章打印机自取') {
that.get_method = 'a';
that.use_method_ifShow_a = true;
that.use_method_ifShow_b = false;
that.use_method_ifShow_c = false;
that.online_notice_text = '印章类型为电子印章，需自行到本公司指定印章打印机找印章协调员领取';
} else if (text == '邮寄至本公司印章协调员') {
that.get_method = 'b';
that.use_method_ifShow_a = false;
that.use_method_ifShow_b = true;
that.use_method_ifShow_c = false;
that.online_notice_text = '印章类型为物理印章，证明开具后邮寄至公司所在地址';
} else {
that.get_method = 'c';
that.use_method_ifShow_a = false;
that.use_method_ifShow_b = false;
that.use_method_ifShow_c = true;
that.online_notice_text = '印章类型为物理印章，可自定义邮寄地址';
}
}
});
var width=$(window).width()/3;
var defaultArea = $('#myArea').attr('areaid');
$('#myArea').scroller('destroy').scroller({
preset: 'area',
theme: 'android-ics light',
defaultValue: defaultArea,
mode: 'scroller',
lang: 'zh',
display: 'bottom',
animate: 'slideup',
maxWidth:width,
rows: 3,
onSelect: function (text,src) {
that.use_method_area=src.area;
that.use_method_area_string = text;
}
});
$("#myArea").on('click', function () {
$("#myArea").scroller('show');
})
},
incomeType:function(){
var that = this;
$('#income_type').scroller('destroy').scroller({
preset: 'select',
theme: 'android-ics light',
mode: 'scroller',
lang: 'zh',
display: 'bottom',
rows: 3,
onSelect: function (text) {
if (text =='当前月薪' ){
that.salary = that.salay_list.A
that.income_type ='A';
}else if (text =='近12个月税前月均收入'){
that.salary = that.salay_list.B
that.income_type ='';
}else if (text =='近12个月税前年薪' ){
that.salary = that.salay_list.C
that.income_type ='C';
}else if (text =='上一自然年度税前年薪' ){
that.salary = that.salay_list.D
that.income_type ='D';
}
}
});
setTimeout(function () {
that.listenClick();
},300)
},
listenClick:function(){
var that =this;
//判断是否为苹果
var use_method_dummy = document.getElementById('use_method_dummy');
var quantity_dummy = document.getElementById('quantity_dummy');
var get_method_dummy = document.getElementById('get_method_dummy');
var myArea = document.getElementById('myArea');
var income_type_dummy = document.getElementById('income_type_dummy');
var textarea_area = document.getElementById('textarea_area');
var textarea_value_span = document.getElementById('textarea_value_span');
if (isIPHONE){
document.addEventListener('touchstart',function (e) {
var e = e || window.event;
if (e.target == use_method_dummy || e.target == income_type_dummy || e.target == quantity_dummy || e.target == get_method_dummy || e.target == myArea ){
e.preventDefault();
$('#textarea_area').blur();
$('#receive').blur();
$('#cellphone').blur();
}
},false);
document.addEventListener('touchend',function (e) {
var e = e || window.event;
if (e.target == use_method_dummy || e.target == income_type_dummy || e.target == quantity_dummy || e.target == get_method_dummy || e.target == myArea ){
setTimeout(function () {
$(e.target).trigger('click');
},350)
}
},false)
}
},
//文本框在也难下面,输入法遮住
if(/Android [4-6]/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
},0);
}
})
}
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function(type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function(name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function() {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
console.log(elem.scrollHeight,document.documentElement.scrollTop);
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra +10+ 'px';
console.log(height,extra)
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
var appiMcAddr = document.getElementById("appiMcAddr");
var appiMcEmplAddr = document.getElementById("appiMcEmplAddr");
autoTextarea(appiMcAddr); // 调用
autoTextarea(appiMcEmplAddr); // 调用
//所有的input框不能记忆用户输入的数据
$('input').attr('autocomplete','off').attr('spellcheck','off').attr('autocorrect','off').attr('autocapitalize','off');
//iso 光标漂移问题
var ua = window.navigator.userAgent.toLowerCase();
var is_ios = /iphone|ipad|ipod/g.test(ua)?true:false;
var inputList = document.getElementsByTagName('input');
var textareaList = document.getElementsByTagName('textarea');
var ele_focus;
if(is_ios){
var if_focus = false;
var if_focus_s = false;
for(var i=0;i<inputList.length;i++ ){
inputList[i].addEventListener('click',inputFocus,false)
inputList[i].addEventListener('blur',inputBlur,false)
}
for(var i=0;i<textareaList.length;i++ ){
textareaList[i].addEventListener('click',inputFocus,false)
textareaList[i].addEventListener('blur',inputBlur,false)
}
function inputFocus(e){
var e = e || window.event;
ele_focus = e.target;
if(ele_focus.type != 'radio'
&& ele_focus.type != 'checkbox'
&& ele_focus['id']!='appiMcAddrCity'
&& ele_focus['id']!='appiMcResideType_dummy'
&& ele_focus['id']!='appiMcResideSts_dummy'
&& ele_focus['id']!='appiMcResideYear'
&& ele_focus['id']!='appiMcEducation_dummy'
&& ele_focus['id']!='appiMcEmplAddrCity'
&& ele_focus['id']!='appiMcEmplIndustryType_dummy'
&& ele_focus['id']!='appiMcEmplBizType_dummy'
&& ele_focus['id']!='appiMcEmplPosiYear'
&& ele_focus['id']!='appiMcEmplBizType_dummy'
&& ele_focus['id']!='check_ck'
){
if_focus = true;
if_focus_s = true;
var ele_top = $(ele_focus).offset().top;
$('#hiddenInput').css('top',ele_top)
}else{
if_focus = false;
if_focus_s = false;
}
}
function inputBlur(e){
var e = e || window.event;
if_focus = false;
}
document.querySelector('body').addEventListener('touchmove',touchmove_ios,false);
function touchmove_ios(e){
var e = e || window.event;
if(if_focus){
$('#hiddenInput').focus();
if_focus = false;
}
}
1.由于是在触屏上使用所以没有用到IE的二级事件。
2.做了一个判断，只在IPHONE上触发。
3.当时做完了同事说方法执行的太快了，客户来不及反应键盘就隐藏了，于是添加了一个time参数用做settimeout设置。
//判断是否为苹果
var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
// 元素失去焦点隐藏iphone的软键盘
function objBlur(id,time){
if(typeof id != 'string') throw new Error('objBlur()参数错误');
var obj = document.getElementById(id),
time = time || 300,
docTouchend = function(event){
if(event.target!= obj){
setTimeout(function(){
obj.blur();
document.removeEventListener('touchend', docTouchend,false);
},time);
}
};
if(obj){
obj.addEventListener('focus', function(){
document.addEventListener('touchend', docTouchend,false);
},false);
}else{
throw new Error('objBlur()没有找到元素');
}
}
if(isIPHONE){
var input = new objBlur('input');
input=null;
}
$("input").on("click",function(){vartarget=this;setTimeOut(function(){target.scrollIntoView(true);},100);})