admittionLetter心得

问题1：　移动端弹出键盘之后安卓布局混乱。

解决办法：　没有找到什么特别好的解决办法　只能监听ｗｉｎｄｏｗ的ｒｅｓｉｚｅ事件每次弹起重新布局，还好此次布局不复杂，该问题待解决

$(window).bind('resize', function() {
        if ($(this).height() < 400) {
            $('#js_name').css('top', '53%');
            $('.openBtn').css('top', '68%');
            console.log('resize');
        }else{
            $('#js_name').css('top', '43%');
            $('.openBtn').css('top', '50%');
        }
    })

问题2： 想要div内部滚动，但微信打开页面整个document会上下滚动，严重干扰内部滚动条工作。如果preventDefault则整个滚动都会失效。

解决办法：不懂，待理解

var localScroll = function(elem) {
	// Variables to track inputs
	var startY, startTopScroll;

	elem = elem || document.querySelector(elem);

	// If there is no element, then do nothing	
	if(!elem)
		return;

	// Handle the start of interactions
	elem.addEventListener('touchstart', function(event){
		startY = event.touches[0].pageY;
		startTopScroll = elem.scrollTop;
		
		if(startTopScroll <= 0)
			elem.scrollTop = 1;

		if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
			elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
	}, false);
};
new localScroll(document.getElementById("scrollable"));

 大神给我加了一段代码··暂时get不了为什么··· 先mark

大神还添加了这样一个属性-webkit-overflow-scrolling: touch; 允许独立的滚动区域和触摸回弹。

可以加快滚动速度。

3、新的尝试 更改内置的滚动条样式

.mainInner::-webkit-scrollbar{
	 8px;
}
.mainInner::-webkit-scrollbar-thumb{
	background-color: #eee8d8;
	border-radius: 4px;
}

 手机端上能修改的样式不多，其他样式待尝试