首頁 > 開發者 > JavaScript
標籤：logs rip aof png 視頻 get 高度 html code
鎮場詩：
清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。
學有小成返哺根，願鑄一良心部落格。誠心於此寫經驗，願見文者得啟發。
——————————————————————————————————————————
code:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title><style type="text/css"> #content{ width:450px; height:350px; border:1px solid blue; margin:20px auto; overflow:auto;/*超出的部分自動有捲軸*/ }</style> <script type="text/javascript"> //當拖動捲軸時，運行這個函數 function ShowData() { //展示結果的p標籤 var dataShowPObj = document.getElementById("dataShowDivObj"); //內容的div標籤 var content = document.getElementById("content"); //多了2px是邊框線 var dataOfContent = "整個div的寬度是" + content.offsetWidth + ",高度是" + content.offsetHeight; dataOfContent += "<br />"; dataOfContent += "不含捲軸的寬度是" + content.scrollWidth + ",總的文字的高度是" + content.scrollHeight; dataOfContent += "<br />"; dataOfContent += "向下滾動了"+content.scrollTop; dataShowPObj.innerHTML = dataOfContent; } //在我學習這個效果的時候，我的天呀，這個忘記加，那個記錯了。。。 //真可謂是 基礎不牢，地動山搖。 </script></head><body> <div id="content" onscroll="ShowData()"> 須菩提。若有人言。如來若來若去。若坐若臥。是人不解我所說義。何以故。如來者。無所從來。亦無所去。故名如來。<br />金剛經 第三十品 一合理相分<br />須菩提。若善男子。善女人。以三千大千世界碎為微塵。於意云何。是微塵眾寧為多不。甚多。世尊。何以故。若是微塵眾實有者。佛即不說是微塵眾。所以者何。佛說。微塵眾。即非微塵眾。是名微塵眾。世尊。如來所說三千大千世界。即非世界。是名世界。何以故。若世界實有。即是一合相。如來說。一合相。即非一合相。是名一合相。須菩提。一合相者。即是不可說。但凡夫之人貪著其事。<br />金剛經 第三十一品 知見不生分<br />須菩提。若人言。佛說我見人見眾生見壽者見。須菩提。於意云何。是人解我所說義不。不也。世尊。是人不解如來所說義。何以故。世尊說。我見人見眾生見壽者見，即非我見人見眾生見壽者見，是名我見人見眾生見壽者見。須菩提。發阿耨多羅三藐三菩提心者。於一切法。應如是知。如是見。如是信解。不生法相。須菩提。所言法相者。如來說即非法相。是名法相。<br />金剛經 第三十二品 應化非真分<br />須菩提。若有人以滿無量阿僧祗世界七寶持用布施。若有善男子。善女人發菩提心者。持於此經。乃至四句偈等。受持讀誦。為人演說。其福勝彼。云何為人演說。不取於相。如如不動。何以故。一切有為法。如夢幻泡影。如露亦如電。應作如是觀。佛說是經已。長老須菩提。及諸比丘。比丘尼。優婆塞。優婆夷。一切世間天人阿修羅。聞佛所說。皆大歡喜。信受奉行。 </div> <div id="dataShowDivObj"></div></body></html>
result:
初始狀態：
滾動後：
——————————————————————————————————————————
博文的精髓，在技術部分，更在鎮場一詩。IDE: VS2015;瀏覽器: Firefox。
html+css+js，強，值得努力學習。傳智播客的視頻教程是我的學習資源,推薦。
如果博文有可以改進的地方，請留下評論，我會認真思考的。
註：我是一位正在努力的普通人，此文僅供測試與參考使用，不可做其他用途。當參考博文內容時，代表您已接受使用規定。
JavaScript基礎 擷取整個div的寬度 不含捲軸的寬度 向下滾動了多少px offsetWidth scrollWidth scrollTop
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
