Authored by 梁志锋

侧边栏字体间距缩小,禁止滚动

... ... @@ -24,97 +24,6 @@ var start = 0,
lazyLoad($('img.lazy'));
function preventDefault(e) {
e = e || window.event;
e.preventDefault && e.preventDefault();
e.returnValue = false;
}
function stopPropagation(e){
e = e || window.event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = false;
}
/**function innerScroll(e){
// 阻止冒泡到document
// document上已经preventDefault
stopPropagation(e);
var delta = e.wheelDelta || e.detail || 0;
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(delta < 0) {
preventDefault(e);
return false;
}
}
if(box.scrollTop === 0){
if(delta > 0) {
preventDefault(e);
return false;
}
}
// 会阻止原生滚动
// return false;
}**/
/**var disableScroll = function(){
$(document).on('mousewheel', preventDefault);
$(document).on('touchmove', preventDefault);
};
var enableScroll = function(){
$(document).off('mousewheel', preventDefault);
$(document).off('touchmove', preventDefault);
};
// 内部可滚
$sideNav.on('touchmove mousewheel', stopPropagation);
// 外部禁用
disableScroll();
// 移动端touch重写
var startX, startY;
$sideNav.on('touchstart', function(e){
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
});**/
// 仿innerScroll方法
/**$sideNav.on('touchmove', function(e){
e.stopPropagation();
var deltaX = e.originalEvent.touches[0].pageX - startX;
var deltaY = e.originalEvent.touches[0].pageY - startY;
// 只能纵向滚
if(Math.abs(deltaY) < Math.abs(deltaX)){
e.preventDefault();
return false;
}
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(deltaY < 0) {
e.preventDefault();
return false;
}
}
if(box.scrollTop === 0){
if(deltaY > 0) {
e.preventDefault();
return false;
}
}
// 会阻止原生滚动
// return false;
});**/
$('.nav-btn').on('touchstart', function(event) {
$sideNav.css('pointer-events', 'none');
$mobileWrap.addClass('menu-open');
... ... @@ -124,12 +33,6 @@ $('.nav-btn').on('touchstart', function(event) {
event.stopPropagation();
openSideNav = true;
//设置boy高宽,页面不能上下滑动
$('body').css({
height: $(window).height(),
overflow: 'hidden'
});
setTimeout(function() {
$sideNav.css('pointer-events', 'auto');
}, 400);
... ... @@ -144,11 +47,6 @@ function hideSideBar() {
$('.overlay').hide();
$('.sub-nav').removeClass('show');
$sideNav.removeClass('on');
$('body').css({
height: 'auto',
overflow: 'auto'
});
//enableScroll();
}
}
... ... @@ -157,6 +55,10 @@ $('.overlay').on('touchstart', function(e) {
return false;
});
$sideNav.on('touchmove', function(e) {
return false;
});
//点击一级导航,弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
if ($(this).find('.sub-nav').size() > 0) {
... ...
... ... @@ -14,7 +14,7 @@
@include transition(all .3s);
> ul {
margin-bottom: 20rem / $pxConvertRem;
margin-bottom: 16rem / $pxConvertRem;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
... ... @@ -22,8 +22,8 @@
li {
position: relative;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
height: 64rem / $pxConvertRem;
line-height: 64rem / $pxConvertRem;
background: #fff;
&:after {
... ... @@ -45,21 +45,23 @@
a {
display: block;
height: 100%;
padding-left: 110rem / $pxConvertRem;
padding-left: 108rem / $pxConvertRem;
color: #444;
}
em {
font-weight: bold;
font-size: 26rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
.title {
display: inline-block;
font-size: 36rem / $pxConvertRem;
vertical-align: bottom;
padding-left: 1rem;
// 此处字体小于 12px, 先扩大,再scale缩小
@include transform(scale(0.5));
transform-origin: 0 50% 0;
}
.nav-icon, .nav-img {
... ... @@ -92,8 +94,8 @@
.first {
li {
height: 100rem / $pxConvertRem;
line-height: 100rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
&:last-child {
... ... @@ -105,7 +107,7 @@
}
em {
font-size: 36rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
}
.nav-img, .nav-icon {
... ...