① js無限滾動中，iOS慣性滾動停止的位置怎麼確定
可以給你的webView的scrollView屬性指氏碰敗定delegate然後吵旦實現scrollViewDidEndDecelerating方法來監聽慣性滾動停止殲顫事件，這個時候獲取scrollView的滾動位置，然後通過js傳到網頁中
② JS實現滾動條觸底載入更多
原理
1.通過監聽滾動睜悔區域DOM的scroll事件, 計算出觸底
// 滾動可視區域高度 + 當前滾動位置 === 整個滾動高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
2.觸底後觸發列表添加, 列表添加使用createDocumentFragment, 將多次插入的DOM先存入內存, 最後爛廳一次填充進去, 提高性能, 也方便後面的MutationObserver監聽
3.使用MutationObserver監聽列表的DOM添加, 添加完畢後, 隱藏載入中飢早隱提示
示例
https://codepen.io/klren0312/full/dybgayL
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
③ 物理學的 H5 應用：模擬慣性滑動
在移動端 H5 中，時間選擇器（ date-picker ）、省市區選擇器（ area-picker ）等組件經常會使用這樣的交互效果：
這個 gif 是在【微信錢包 - 賬單】中錄制的 ios 原生時間選擇器。可見， 當用戶手指在選擇器上先是滑動再從屏幕上移開，內容會繼續保持一段時間的滾動效果，並且滾動的速度和持續的時間是與滑動手勢的強烈程度成正比。 這種交互思路源於 ios 系統原生元素的滾動回彈（ momentum-based scrolling ），來看 H5 的一個普通列表在 ios 上的滾動表現：
社區上大部分的移動端組件庫的選擇器組件都採取了這種交互方式，看看效果：
weui 的選擇器實現了慣性滑動，但滑動動畫結束得有稿掘點突兀，效果一般。
vant 的選擇器壓根沒有做慣性滑動，當手指從屏幕上移開後，選擇器的滑動會立刻停止。可見這樣的交互體驗是比較差的。
接下來我會從設計層面剖析和模擬慣性滑動的交互效果。
不難想像，慣性滑動非常貼合現實生活中的一些場景，如汽車剎車等。除此之外，與物理力學中的滑塊模型也十分相似，由此我會參考滑塊模型來剖析慣性滑動的全過程。
慣性 來源於物理學中的慣性定律（即 牛頓第一定律 ）：一切物體在沒有受到力的作用的時候，運動狀態不會發生改變，物體所擁有的這種性質就被稱為慣性。我們不妨把慣性滑動模擬成滑動滑塊然後釋放的過程（以下討論中用戶滑動的目標皆模擬成 滑塊 ），主要劃分為兩個階段：
描述滑塊的慣性滑動，首先需要求出滑動的距離。在上述二階段中，滑塊受摩擦力 作 勻減速直線運動 。假設滑動距離為 ，初速度為 ，末速度為 。根據位移公式
加速度公式
可以仔昌算出慣性滑動距離
由於勻減速運動的加速度為負，不妨設一個加速度常量 ，使其滿足 ，那麼
這里 為正數。也就是說，我們只需要求出初始速度即可。
關注第一個階段，假設用戶滑動滑塊的距離為 ，滑動的持續時間是 ，那麼二階段的初速度 可以根據位移公式求得
綜上，求慣性滑動的距離我們需要記錄用戶滑動滑塊的 距離 和 持續時間 ，並設置一個合理的 加速度常量 。念敬扒
注意，這里的距離和持續時間並不是用戶滑動滑塊的總距離和時長，而是觸發慣性滑動范圍內的距離和時長，詳見【慣性滑動的啟動條件】。
針對二階段的勻減速直線運動，時間段 產生的位移差 ，其中 。也就是說時間越往後，同等時間間距下通過的位移越來越小，也就是動畫的推進速度越來越慢。
這與 CSS3 transition-timing-function 中的 ease-out 速度曲線相吻合， ease-out （即 cubic-bezier(0, 0, .58, 1) ）的貝塞爾曲線為
上圖來自 在線繪制貝塞爾曲線網站 。圖表中的縱坐標是指 動畫推進的進程 ；橫坐標是指 時間 ；原點坐標為 (0, 0) ，終點坐標為 (1, 1) ，假設動畫持續時間為2秒， (1, 1) 坐標點則代表離動畫開始2秒時動畫執行完畢（100%）。根據圖表可以得出，時間越往後動畫進程的推進速度越慢，符合勻減速直線運動的特性。
然而這樣的速度曲線過於線性平滑，減速效果不明顯。我們基於 ios 滾動回彈的效果，調整貝塞爾曲線的參數為 cubic-bezier(.17, .89, .45, 1) 。
滑塊滑動不是無邊界的，我們來考慮這樣的場景：當滑塊向下滑動，其頂部正要接觸容器上邊界時速度還沒有降到 ，此時如果讓滑塊瞬間停止運動，這樣的交互效果是不理想的。
我們可以把上邊界想像成一條與滑塊緊密貼合的固定彈簧， 當滑塊到達臨界點而速度還沒有降到 時，滑塊會繼續滑動並拉動彈簧使其往下形變，同時會受到彈簧的反拉力作減速運動（動能轉化為內能）；當滑塊速度降為 ，此時彈簧的形變數最大，由於彈性特質彈簧會恢復原狀（內能轉化成動能），從而拉動滑塊反向運動 。
回彈過程也可以分為兩個階段：
根據上述分析，回彈的第一階段作加速度越來越大的變減速直線運動，設此階段的初速度為 ，可以與 建立以下關系
那麼回彈距離為
微積分都來了，簡直沒法算好吧…
我們可以根據運動模型來簡化 的計算，由於該階段的加速度大於 非回彈慣性滑動 的加速度，設 非回彈慣性滑動 的總距離為 ，那麼
所以可以設置一個合理的常量 ，使其滿足
整個觸發回彈的慣性滑動模型包括三個運動階段：
然而把 階段a 和 階段b 描繪成 CSS 動畫是有一定復雜度和風險的：
出於簡化的考慮，可以將 階段a、b 合並為一個運動階段：
對於合並後的 階段a 末段，由於反向加速度越來越大，因此滑塊減速的效率會比 非回彈慣性滑動 同期更大，對應的貝塞爾曲線末段也會更陡，參數調整為 cubic-bezier(.25, .46, .45, .94) 。
在 階段b 中，滑塊先變加速後變減速，嘗試 ease-in-out 的動畫曲線：
可以看出，由於 階段b 初始的 ease-in 曲線使 階段a、b 的銜接段稍有停留，效果體驗一般。所以我們選擇只描繪變減速運動這一段，調整貝塞爾曲線為 cubic-bezier(.165, .84, .44, 1) 。
一次慣性滑動可能會出現兩種情況：
慣性滑動的啟動需要有足夠的動量。我們可以簡單地認為，當用戶滑動的距離足夠大（大於 15px ）和持續時間足夠短（小於 300ms ）時，即可產生慣性滑動。也就是說，最後一次 touchmove 事件觸發的時間和 touchend 事件觸發的時間間隔小於 300ms ，且兩者產生的距離差大於 15px 時認為啟動慣性滑動。
當慣性滑動未結束（包括處於回彈過程），用戶再次觸碰滑塊時會暫停滑塊的運動。原理上是通過 getComputedStyle 和 getPropertyValue 方法獲取當前的 transform: matrix() 矩陣值，抽離出水平 y 軸偏移量後重新調整 translate 的位置。
demo 基於 vuejs 實現，預覽地址： https://codepen.io/JunreyCen/pen/arRYem
④ 怎樣用原生js獲取滾動條滾動的距離
使用js獲取的相關方法
//回到頁面頂部
$("#goTotop").click(function(){
$('body,html').animate({scrollTop:0},1500);//點擊按鈕讓其回到頁面頂部
});
$(window).scroll(function(){
varyheight1=window.pageYOffset;//滾動條距頂端的距離
varyheight=getScrollTop();//滾動條距頂端的距離
varheight=document.documentElement.clientHeight//瀏覽器可視化窗口的大小
vartop=parseInt(yheight)+parseInt(height)-217;
vardivobj=$(".kf");
divobj.attr('style','top:'+top+'px;');
})
/**
*獲取滾動條距離頂端的距離
*@return{}支持IE6
*/
functiongetScrollTop(){
varscrollPos;
if(window.pageYOffset){
scrollPos=window.pageYOffset;}
elseif(document.compatMode&&document.compatMode!='BackCompat')
{scrollPos=document.documentElement.scrollTop;}
elseif(document.body){scrollPos=document.body.scrollTop;}
returnscrollPos;
}
⑤ js實現圖片自動的滾動效果
把你的代碼放在「內容」中間就可以了 寬度600px，你自己可以改寬度
<DIV id=demoleft style="OVERFLOW: hidden; WIDTH:600px;">
<TABLE border="0" align="left" cellPadding="0" cellSpacing="0" cellspace="0">
<TBODY>
<TR>
<TD width="600" align=middle vAlign=top id=demo1left>
<!--內容-->
<table width="600" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<%
set rs=server.CreateObject("adodb.recordset")
rs.open "select top 8 * from cp_aboutus where userid="&hid&" order by updatetime desc,articleid desc ",conn,1,1
if not rs.eof then
dim hang
hang = 0
do while not rs.eof
hang = hang + 1
%>
<td>
<table width="110" height="115" border="0" align="center" cellpadding="0" cellspacing="0" id="table12">
<tr>
<td width="110" height="87"><%if rs("headpic")<>"" then%><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><img src="<%=rs("headpic")%>" width="110" height="87" border="0" /></a><%else response.Write "<table width=110 height=87 border=0 cellpadding=0 cellspacing=0><tr><td height=23 bgcolor=#EBEBEB align=center>暫無圖片</td></tr></table>" end if%></td>
</tr>
<tr>
<td align="center"><a href="huicpshow.asp?hid=<%=hid%>&id=<%=rs("articleid")%>" title="<%=rs("title")%>" target="_blank"><%=rs("title")%></a></td>
</tr>
</table>
</td>
<%
rs.movenext
loop
end if
rs.close
set rs=nothing
%>
</tr>
</table>
<!--end 內容-->
</TD>
<TD width="102" vAlign=top id=demo2left></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<SCRIPT>
var speed=18//速度數值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
var demoleft = document.getElementById("demoleft");
var demo2left = document.getElementById("demo2left");
var demo1left = document.getElementById("demo1left");
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其實demo.scrollLeft是有 最大值的，和demo0.width,引用的圖片的width有關系。demo過了一半（每半內容一樣的），重新開始循環
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++//不斷的增加，相當於父容器的滾動條不斷是縮小；但由於OVERFLOW: hidden; （滾動條不可見）
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
</SCRIPT>
⑥ js控制頁面滾動（實例）
目標描述：多個圖片排列下來，按右邊的小按鈕，抵達相應位置，滑鼠滑動，抵達下一圖，或者上一圖
知識點：onmousewheel，addEventListener，scrollTo，setTimeout
過程：
1.body 寬，高釘死，100vw，100vh，overflow：hidden 使得不出現滾動條，不然不好看
2.圖片放進去，排起來，（注意：默認空隙的處理，可以使用flex布局，空隙就不見了）
3.製作相對於視窗的按鈕，幾張圖片就幾個按鈕，（position: fixed;計算一下高度，可以利用calc計算top使得上下居中）
4.美化一下，css寫寫
5.先寫簡單的按鈕事件
6.寫監聽滑動事件(onmousewheel在火狐無效，DOMMouseScroll只在火狐有效)
react在componentDidMount的時候監聽
7.補充寫一下火狐的
9.測試檢查一下。
完成啦，啦啦啦～
我的截圖：
缺點：這里我是一直對頁面進行監聽，導致滑動過快對時候動畫效果開始執行對時間延後。體現為滑動對輕，整個就流暢一點。
ps：寫這種帶計算帶頁面，我覺得是考驗思維的，你可以對這里的知識點不熟練，但是你必須得能理解每一步的加加減減。
⑦ js或jquery 怎麼監聽由於屏幕慣性滾動而產生的距離
慣性滾動？手機端么？PC端沒有慣性滾動的吧。
那麼你數派手機判弊端用的什薯沖賀么？iscroll?.，不然也不會產生慣性滾動啊
⑧ js如何實現慣性滑動效果
主要思路是：滑鼠當前點到下一點直接間隔計算出速度。這樣就實現了慣性滑動效果。
下面是簡單的js代碼實現：僅供參考：
<style>
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0;}
</style>
<script>
window.onload=function(){
varoDiv=document.getElementById('div1');
variSpeedX=0;
variSpeedY=0;
varlastX=0;
varlastY=0;
vartimer=null;
oDiv.onmousedown=function(ev){//div的滑鼠按下事件，主要計算滑鼠當前位置，和移動位置。這樣可以計算出滑鼠移動速度。
varoEvent=ev||event;
vardisX=oEvent.clientX-oDiv.offsetLeft;
vardisY=oEvent.clientY-oDiv.offsetTop;
clearInterval(timer);
document.onmousemove=function(ev){//滑鼠拖動事件。
varoEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
iSpeedX=oEvent.clientX-lastX;
iSpeedY=oEvent.clientY-lastY;
lastX=oEvent.clientX;
lastY=oEvent.clientY;
}
document.onmouseup=function(){//當滑鼠抬起後，清掉移動事件。
document.onmousemove=null;
document.onmouseup=null;
oDiv.releaseCapture&&oDiv.releaseCapture();
startMove();
}
oDiv.setCapture&&oDiv.setCapture();
returnfalse;
}
functionstartMove(){//移動函數，主要操作是計算滑鼠移動速度和移動方向。
clearInterval(timer);
timer=setInterval(function(){
iSpeedY+=3;
vart=oDiv.offsetTop+iSpeedY;
varl=oDiv.offsetLeft+iSpeedX;
if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
iSpeedY*=-0.8;
iSpeedX*=0.8;
}
if(t<0){
t=0;
iSpeedY*=-0.8;
iSpeedX*=0.8;
}
if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
iSpeedX*=-0.8;
iSpeedY*=0.8;
}
if(l<0){
l=0;
iSpeedX*=-0.8;
iSpeedY*=0.8;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
if(Math.abs(iSpeedX)<1)iSpeedX=0;
if(Math.abs(iSpeedY)<1)iSpeedY=0;
if(iSpeedX==0&&iSpeedY==0&&t==document.documentElement.clientHeight-oDiv.offsetHeight){
clearInterval(timer);
}
document.title=i++;
},30);
}
};
</script>
</head>
<body>
<divid="div1"></div>
</body>
⑨ js實現圖片滾動效果
<SCRIPT language="JavaScript">
var speed=50; //設置滾動速度
demo2.innerHTML=demo1.innerHTML //復制dome1為dome2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //當滾動至dome1與dome2交界時
demo.scrollTop-=demo1.offsetHeight //dome跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//滑鼠移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑鼠移開時重設定時器，繼續滾動
</SCRIPT>
<div id="demo" style="overflow: hidden; height: 600; width: 180; background: #214984; color: #ffffff">
<div id="demo1" align="center">
<!-- 定義圖片 -->
</div>
<div id="demo2" align="center"></div>
</div>
⑩ 在js中怎麼設置滾動條滾動的距離
如果使用jquery的話，可以這樣寫：
$(window).bind("scroll", function(){
var top = $(this).scrollTop(); // 當前窗口的滾動距離
});
如果使用原生js，可以這樣寫（摘自網上的）：
/**
* 獲取滾動條距離頂端的距離
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}