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