MUI-scroll滚动,重新定位滚动位置

dom结构:

使用mui区域滚动,把需要滚动的内容放在其中

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>

初始化加载滚动条:

mui('#mui-scroll').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
});

主要功能:

1、 所有项均可以展开与折叠,展开内容高度自适应

2、点击当前项时,折叠展开的兄弟项,同时,兄弟项的箭头向下

3、若在当前项之前有兄弟项展开,则之前兄弟项展开内容隐藏,当前项向上滚动高度为隐藏内容的高度;

4、若在当前项之后有兄弟项展开,则之后兄弟项展开内容隐藏,当前项位置不变;

实际问题:

1、有兄弟项展开时,点击当前项,当前项展示内容自动定位到上次滚动的位置,没有回弹到当前项

原因:

1、有兄弟项展开时,mui记录了滚动条的位置,点击当前项时,当前项的位置就是滚动条记录的位置,所以需要重新定位滚动条的位置,才能回弹到合适的位置

解决方法:

1、找到之前兄弟项中展开的项

2、获取滚动条定位scroll_y

3、获取展开内容的高度visibleSibH

4、重新定位的new_y值(new_y=scroll_y+visibleSibH),注意:new_y的值可能大于0,此时需要设置new_y=0

// 上下箭头tap事件
			mui("#mui-scroll").on('tap', '.bus_bottom', function() {
				var $self = $(this);
				var $obj_next = $self.next();

				// 内容显示与隐藏,箭头变化
				if ($obj_next.hasClass("mui-hidden")) { //显示
					// 点击当前项时,兄弟项折叠,
					// --如果之前兄弟项展开,则需要重新定位滚动条;之后兄弟项展开,滚动条不需要重新定位,自动隐藏
					// 因此,只需要判断之前兄弟项有没有展开,展开则重新定位滚动条
					// 所有兄弟项不管展开与否 ,统一折叠,箭头改变
					// 获取当前项之前的兄弟项
					var $visiblePrev = $self.parent().prevAll().find("div.bus_detail:visible");
					var prevlens = $visiblePrev.length;
					if (prevlens > 0) { //之前兄弟项有展开
						// --1获取滚动条定位;--2获取可见项的高度;--3重新定位的y值
						var scroll_y=mui('#mui-scroll').scroll().y;
						var visibleSibH=$visiblePrev.height();
						var new_y=scroll_y+visibleSibH;
						// 滚动条y值是负数,new_y可能>0,>0时,设置成0
						if(new_y>0){
							new_y=0;
						}
						//100毫秒滚动到固定位置
						mui('.mui-scroll-wrapper').scroll().scrollTo(0, new_y, 0); 
					} else { //没有展开
						console.log("之前兄弟项没有展开");
					}
					// --1针对所有兄弟项,获取可见项,隐藏列表
					var $sibObj=$self.parent().siblings().find("div.bus_detail:visible");
					$sibObj.addClass("mui-hidden"); 
					// --2可见项箭头改变
					$sibObj.prev().find("div.bus_bottom_c").removeClass("icon_up").addClass("icon_down");
					
					// 1,当前项箭头变化
					$self.find("div.bus_bottom_c").removeClass("icon_down").addClass("icon_up");
					// 2,显示列表信息
					$obj_next.removeClass("mui-hidden");
					// 3,站点集合初始化显示正向路径
					$obj_next.find(".list_title_tab").removeClass("lt_active");
					$obj_next.find(".list_title_tab:first").addClass("lt_active");
					$obj_next.find("div.list_stations").addClass("mui-hidden");
					$obj_next.find("div.list_stations:first").removeClass("mui-hidden");
					// 4,初始化滑动区域
					// mui('.list_stations .mui-scroll-wrapper').scroll({
					// deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006 
					// });
					// 5,站点列表tab切换事件
					mui(".list_title").on('tap', '.list_title_tab', function() {
						var $lt_self = $(this);
						$lt_self.siblings().removeClass("lt_active");
						$lt_self.addClass("lt_active");
						var index = $lt_self.index();
						// console.log(index);
						$lt_self.parent().siblings(".list_stations").addClass("mui-hidden");
						$lt_self.parent().siblings(".list_stations").eq(index).removeClass("mui-hidden");
					});
				} else { //隐藏
					$obj_next.addClass("mui-hidden");
					$self.find("div.bus_bottom_c").removeClass("icon_up").addClass("icon_down");
				}
			});

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值