欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用weui.css后scrollTop不起作用的解决方法

程序员文章站 2022-05-04 07:52:52
...

最近开发一个微信服务号对应的移动端应用,发现在使用了weui框架后scrollTop失效,页面不能自动向上滚动,经过一番实验,找到了个解决方法。

解决方法:

页面结构如下:

<div class="weui-tab__panel" id="page">
......
   <div class="weui-cells">
      .....
      <div class="weui-panel weui-panel_access" id="logInfoDetail">
           <div class="weui-panel__bd">
           ...
           </div>
      </div>
  </div>
</div>
<div class="weui-tabbar">
....
</div>

javascript代码片段如下:

$('#logInfo').on('click', function() {
		        if (logHide) {
			        $('#logInfoDetail').show();
			        if (hideCount < 1){
			        scrollTo("#logInfoDetail",300);
			        }
			        logHide = false;
		        } else {
			        $('#logInfoDetail').hide();
			        hideCount = hideCount + 1;
			        logHide = true;
		        }
		        
	        })
function scrollTo(ele, speed){
        	if(!speed) speed = 300;
        	if(!ele){
        		$("html,body").animate({scrollTop:0},speed);
        	}else{
        		if(ele.length>0) $("#page").animate({scrollTop:$(ele).offset().top},speed);
        		
        	}
        	return false;
        }
相关标签: JAVASCRIPT