整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
是在寫樣式的時候，會碰到給div無論怎么加樣式 overflow-y: auto 的時候，都不會出現垂直的滾動條，經過不斷折騰終于知道是啥原因導致了。
<style>
body{
height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出現滾動條
}
.parent{
//你自己樣式
height: 100%; //父元素的高度也需要是100%才可以出現滾動條
}
.children{
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
</style>
<div class="parent">
<div class="children">
xx-blog主題
xxzhuti主題網
</div>
輯導語：產品中我們經常會遇到上下滑動的頁面，比如我們在進行預覽頁面時，需要上下滑動進行查看；本文作者分享了關于實現移動端頁面上下滑動效果的Axure教程，我們一起來了解一下。
案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章會介紹2種實現頁面上下滑動效果的方法（學會這兩種方法就夠用了）。
這個方法重點是利用了“動態面板”的“滾動條”垂直滾動的功能是實現內容上下滑動的效果。
設計思路如下：
如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板（375*567）。
1）填充滾動預覽的內容：雙擊【動態面板】，進入state1，然后再里面那個框框里填東西，使勁填，至少要填超過動態面板的高度。
2）實現內容滾動：關閉state1，然后選中【動態面板】右擊選中【滾動條】選擇【垂直滾動】。
或者如下圖操作：
點擊“預覽”，上下滑動的效果就實現了，so easy！但是你會發現中有一條滾動條在右邊好抓狂，影響美觀。
3）隱藏滾動條：我們可以用一個矩形這個滾動條給遮擋起來（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下圖：
點擊預覽，完美。
這個方法比方法一稍微難理解一丟丟，可以跟著下面的操作步驟一邊操作一邊理解額。
這個方法是在于對動態面板2的內容會跟隨操作動態面板1的滾動而移動，并對滑動界限設置。
設計思路如下：
gif動態來源于：http://www.woshipm.com/rp/420885.html
一如既往先畫個模型，如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板1（375*567），再在動態面板1的state1中添加一個動態面板2（375*567）。
1）在動態面板2的state1中填充內容；使勁填充內容，至少要填超過動態面板1的高度，完成后才能看到滑動效果。
2）拖動 動態面板1 時，動態面板2跟隨垂直拖動而移動；選中【動態面板1】點擊【新建交互】選中【拖動時】-【移動】目標選擇“動態面板2”，移動選擇“跟隨垂直拖動”點擊“完成”，如圖下設置：
3）拖動結束 動態面板1時，如果動態面板2未接觸到頂部矩形時，移動動態面板2開頭回到頂部。
4）拖動結束 動態面板1時，如果動態面板2未接觸到底部矩形時，移動動態面板2結尾回到底部；操作步驟和（3）基本一致。
點擊預覽，完美。
終于寫完了o(╥﹏╥)o，希望也能幫到有緣的你們額。
本文由 @人事匆匆 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
看個錨點定位的例子
發現頁面唰的一些就到頂部了，快到我們懵逼了。。。
開始解決
CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。
scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。
在網頁默認滾動是在<html>標簽上，移動端大多數在<body>標簽上。
我們可以這樣加：
html,
body { scroll-behavior:smooth; }
加了以后的效果如下：
這是錄制的GIF圖，效果沒那么好。 大家可以動手試一下，滑動體驗非常不錯。
兼容性不夠好
當然我們可以通過js來做個類似
DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內，通過觸發滾動容器的定位實現。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6，兼容性非常好。
參數如下
{
behavior: "auto" | "instant" | "smooth", // 默認 auto
block: "start" | "center" | "end" | "nearest", // 默認 center
inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}
解釋一下這三個參數：
用法：
html:
<div class="wrap"> <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</div> <ul class="body"> <li>1</li> <li>2</li> <li id="box">我是黑色</li> <li>3</li> <li>4</li> </ul> </div>
js:
function onScrollIntoView () {
var element = document.getElementById("box");
element.scrollIntoView({behavior: "smooth"});
}
效果：
這回大家再也不用害怕做錨點定位啦。
最后我們在說一個關于頁面滾動問題吧，那就是 返回頂部 功能實現
我們常用定時器 setInterval 來不斷減去高度。
如：當前距離頂部 1000， 我們每10毫秒減50，
var timer = setInterval(function() { // 定時器 每10毫秒執行一次
// 頂部距離 document.body.scrollTop = 1000
var speed = 50 // 返回頂部速度
document.body.scrollTop = document.body.scrollTop - speed
if (document.body.scrollTop === 0) { // 返回到達頂部后， 銷毀定時器
clearInterval(timer)
}
}, 10)
效果：
大家會發現，頁面返回是滾動起來很干。 沒10毫秒減50. 很平均，在交互上效果并不好。
借鑒上面 scroll-behavior:smooth 的交互效果。 緩動的返回頂部。
改一下計算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動起來是不是就平滑了呢？
換算成公式：開始位置 = 開始位置 + (結束位置 - 開始位置) / 速度
document.body.scrollTop = 1000 + (0 - 1000) / 2
公式太煩了還是上代碼吧：
var onTop = function (a, b, c, d) {
if (a == b || typeof a != 'number') {
return
}
b = b || 0
c = c || 2
var speed = function () {
a = a + (b - b) / c
if (a < 1) {
d(b, true)
return
}
d(a, false)
requestAnimationFrame(speed)
}
speed()
}
調用：
var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
target.scrollTop = value
})
效果：
Ps: gif錄制效果不好，大家可以動手寫一下DEMO
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
