移动端导航过多，点击导航左右滚动回弹

标签：uri   图片   doc   geturl   ref   arc   char   菜单   animate   

移动端导航过多，点击导航左右滚动回弹

移动端项目导航栏目很多，需要左右滑动，前面文章，已经实现，跳转页面也实现了，现在问题是，当点击后面的导航栏目时候，聚焦当前的时候，

需要给当前导航添加一个动画回弹的效果，也就是，让后面的导航，慢慢的移动到可视区域位置

----------------------------------HTML-------------------------------------------

<!--container一级导航-->
<div class="container">
<nav class="nav">
<p class="con">
<a href="a.html?currentIndex=0">00000</a>
<a href="b.html?currentIndex=1">11111</a>
<a href="c.html?currentIndex=2">22222</a>
<a href="d.html?currentIndex=3">33333</a>
<a href="e.html?currentIndex=4">44444</a>
<a href="f.html?currentIndex=5">55555</a>
<a href="j.html?currentIndex=6">66666</a>
<a href="h.html?currentIndex=7">77777</a>
<a href="i.html?currentIndex=8">88888</a>
<a href="k.html?currentIndex=9">99999</a>
</p>
</nav>
</div>
<!--container一级导航-->

----------------------------------css-------------------------------------------

/*各个部分样式*/
@charset "utf-8";

html {
overflow-x: hidden;
}

.container {
height: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}

.nav {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
}

.con {
width: 219%;
height: 100%;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
border-bottom: 2px #ccc solid;
}

.con>a {
text-align: center;
width: auto;
color: #000;
display: inline-block;
margin: 0 0.12rem;
font-size: 0.32rem;
line-height: 0.99rem;
height: 0.99rem;
}

.con>a.active {
border-bottom: 2px rgb(255, 123, 0) solid;
color: rgb(255, 123, 0);
}

.container ::-webkit-scrollbar {
display: none;
}

----------------------------------js-------------------------------------------

function getUrlParam(paramName) {

//var params = location.href.substr(1).split(‘&‘);
var params = location.search.substr(1).split(‘&‘);
var result = null;
for (var i = 0; i < params.length; i++) {
var aParam = params[i].split(‘=‘);
if (aParam[0] == paramName) {
result = aParam[1];
break;
}

}

return result

}

$(document).ready(function() {
curItem(getUrlParam("currentIndex"))

});

function curItem(index) {
if(index === -1) {
return
}

var curDOM = $(".con a").eq(index), // 当前的a DOM元素
viewDOM = $(".nav"), // 视图 DOM元素
viewWidth = viewDOM.width(), // 视图宽度
leftRange = curDOM.offset().left, // 当前的a DOM元素距离视图DOM最左边的距离
addedValue = 30; // 附加值，自己定义。主要为了在滚动后，显示出后面的菜单

if(leftRange + curDOM.width() + addedValue > viewWidth) {
// 如果当前的 A DOM元素距离左边的距离，大于视图宽度，说明是看不到的状态
var left = viewDOM.scrollLeft() + (leftRange + curDOM.width() - viewWidth + addedValue)
viewDOM.animate({
scrollLeft: left
},600)
} else if(leftRange - curDOM.width() < viewDOM.scrollLeft()) {
// 如果当前的 A DOM元素距离左边的距离，小于视图scrollLeft的值，说明是看不到的状态
var left = viewDOM.scrollLeft() + leftRange - addedValue
viewDOM.animate({
scrollLeft: left
},600)
}//因为原来他会默认滚动到该去的位置。这次是让它以动画的形式过去就行了

curDOM.addClass("active").siblings().removeClass("active");
}

 ---------------------

下载链接地址：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%AF%BC%E8%88%AA%E8%BF%87%E5%A4%9A%E7%82%B9%E5%87%BB%E6%BB%9A%E5%8A%A8%E5%9B%9E%E5%BC%B9.rar

感谢 华仔 大侠 lost 得以继续 完美 perfect

移动端导航过多，点击导航左右滚动回弹

标签：uri   图片   doc   geturl   ref   arc   char   菜单   animate   

原文地址：https://www.cnblogs.com/leshao/p/9964269.html