本文目錄一覽：
請教JS高手，怎麼讓Iframe中的頁面自動滾屏
在父頁面直接滾子頁面的屏也是可以的。
frames[“iframe”].document.body.scrollTop
你一直給這個對象累加數字也是滾屏的效果了
main.htm:
html
head
meta http-equiv=’Content-Type’ content=’text/html; charset=gb2312′ /
meta name=’author’ content=’F.R.Huang(meizz梅花雪)//’ /
titleiframe自適應加載的頁面高度/title
/head
body
diviframe src=”child.htm”/iframe/div
/body
/html
child.htm:
html
head
meta http-equiv=’Content-Type’ content=’text/html; charset=gb2312′ /
meta name=’author’ content=’F.R.Huang(meizz梅花雪)//’ /
titleiframe 自適應其加載的網頁(多瀏覽器兼容)/title
script type=”text/javascript”
!–
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName(“IFRAME”);
for(var i=0; ia.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0, d=document, dd=d.documentElement;
a[i].parentNode.style.height = a[i].offsetHeight +”px”;
a[i].style.height = “10px”;
if(dd dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +”px”;
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent(“onload”, iframeAutoFit);
//window.attachEvent(“onresize”, iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener(‘load’, iframeAutoFit, false);
//window.addEventListener(‘resize’, iframeAutoFit, false);
}
//–
/script
/head
body
table border=”1″ width=”200″ style=”height: 400px; background-color: yellow”
tr
tdiframe 自適應其加載的網頁(多瀏覽器兼容：IE5.5＋、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等，支持XHTML)/td
/tr
/table
/body
/html
很多人反應在IE7里使用它會死機，那是因為在自適應高度時觸發了 window.onresize 事件，而這個事件又去調用這個調整 iframe 高度的函數，產生了死循環調用。
這段代碼里我對 iframe 所在的父元素也設定了一個高度，以防止iframe 高度變化時頁面跳動的太厲害，在調用的時候可酌情使用這個設置。
js怎麼控制網頁滾動到指定位置
使用scrollby(x軸,y軸)方法就可以使文檔對象滾動到距離瀏覽器窗口坐標的指定位置上
注意事項
文檔對象可以看做是網頁所有可見內容的存儲容器,網頁所有可見內容稱為頁面
網頁x軸坐標與數學一樣,但是y軸坐標是相反的,向下是正數,向上是負數
頁面移動出去的距離不能和滾動條移動出去的距離對等
滾動條移動出去多少像素才能等達到頁面要移動出去的像素是根據整個頁面的尺寸比例計算的
這個文檔對象移動出去的距離在坐標繫上是一定是負數,但是我們要用正數來表示他距離瀏覽器窗口0,0坐標的距離
這個方法移動的是文檔對象和瀏覽器存儲文檔對象的窗口0,0位置坐標的距離,絕不是滾動條和文檔對象的距離,
移動出去的距離就是文檔對象不可見部分內容和瀏覽器存儲文檔對象的窗口0,0坐標的距離
這個方法使用scroll命名只是因為文檔對象移動出去的距離需要滾動條滾動才能達到效果,便於記憶而已
scrollby()方法是window對象下的方法,document對象及其子對象沒有該方法
document對象及其子對象如果要獲取或設置元素內部內容滾動出去的距離,請使用scrollTop和scrollLeft, 注意該方法是計算的不可見部分移動出去的內容頂端距離容器的距離是從容器內邊距開始計算,而不是邊框
使用scrollby()必須存在滾動條,且有一定的高度才能看出方法的效果
fullpage.js自動滾動怎麼設置
目的:實現自動滾動
工具:fullpage.js
頁面中需要引用的JS:
script src=”jquery-2.1.0.js” type=”text/javascript” charset=”utf-8″/script
script src=”jquery.fullPage.js” type=”text/javascript” charset=”utf-8″/script
參照 : jQuery全屏滾動插件fullPage.js
實現自動滾動思路:
所謂自動滾動也就是進入頁面後,不使用鼠標等操作就可以自動翻頁(滾動)
利用js給定一個時間範圍,例如3秒調用一次滾動方法,就可以實現!!!
//獲取一共有多少個需要滾動的錨點
var len=$(“#Id div”).length;
//設定自然數,默認為0
var num=0
//此方法為,頁面停留5秒後自動滾動進入下一屏
settimeOut(function(){
$(“#Id div”).eq(num).fullpage();
ai++;
//如果ai等於錨點數時,將ai重新賦值為0
if(ai==len){num==0;}
},5000);
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：寫這種帶計算帶頁面，我覺得是考驗思維的，你可以對這裡的知識點不熟練，但是你必須得能理解每一步的加加減減。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/245576.html
微信掃一掃 
支付寶掃一掃 