mui 區域局部豎直滑動

 

<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">標題</h1>
		</header>
		<div class="mui-content">
			<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</div>
			<div class="mui-fullscreen">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--這裏放置真實顯示的DOM內容-->
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
						<div style="margin: 10px;">這裏放置真實顯示的DOM內容</div>
					</div>
				</div>
			</div>
		</div>
	</body>

手動設置高度:
一般在scroll控件最外面設置div爲絕對定位,設置top,bottom,left,right值,爲了方便,mui默認設置有個全屏類.mui-fullscreen。

.mui-fullscreen {  
    position: absolute;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
}

我們可以在scroll控件外面添加這個類,然後手動修改top和bottom值。

CSS改動後:

.mui-fullscreen {  
    position: absolute;  
    top: 80px;  
    right: 0;  
    bottom: 0;  
    left: 0;  
}

JS:

function initScroll() {
    mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否豎向滾動  
        scrollX: false, //是否橫向滾動  
        startX: 0, //初始化時滾動至x  
        startY: 0, //初始化時滾動至y  
        indicators: true, //是否顯示滾動條  
        bounce: true, //是否啓用回彈  
        deceleration: 0.0005 //flick 減速係數,係數越大,滾動速度越慢,滾動距離越小,默認值0.0006  
    });
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章