整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
直接上例子代碼給大家一點參考:
<html>
<style>
span {
display: block;
height: 150%;
} /*整點上下的空白 */
</style>
<body>
<button id="from">點擊我</button>
<span></span>
<div id="to">滾動到這:頭條@plzbefat</div>
<span></span>
</body>
<script>
document.getElementById("from").addEventListener("click", () => {
document.getElementById("to").scrollIntoView({
behavior: "smooth", //順滑的滾動
});
});
</script>
</html>
整點例子沒毛病
element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滾動 元素在頂部
element.scrollIntoView(false); // 滾動 元素在底部
element.scrollIntoView(option); //參數(shù)alignToTop:
如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
先，要實現(xiàn)區(qū)域滾動的那個元素要設(shè)置css屬性：overflow: auto;
overflow: auto：如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。簡單的說，就是如果超出元素的部分會出現(xiàn)滾動條：
eg:
如果想出現(xiàn)橫向滾動條，則加上一行css樣式：
white-space: nowrap; 規(guī)定段落中的文本不進行換行：
嗯~~，既然滾動條出來啦，我們只需要修改滾動條的樣式不就可以了嗎？
說干就干！
::-webkit-scrollbar{} 設(shè)置滾動條整體部分
::-webkit-scrollbar-track{} 設(shè)置滾動條內(nèi)部軌道
::-webkit-scrollbar-thumb{} 滾動條的滑塊按鈕
::-webkit-scrollbar-button 滾動條的上下兩端的按鈕
因為我們偽元素是和div綁定的，所有不會和其它滾動條沖突：
設(shè)置一個稍微好看點的：
用JavaScript實現(xiàn)頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理： 1.獲取瀏覽器窗口的高度；
2.獲取頁面滾動的高度；
3.獲取頁面距離文檔（document）頂部的高度
offset().top具體指的是距哪里的高度呢？
一些獲寬高度的屬性：
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
1.offsetTop : 當前對象到其上級層頂部的距離.
不能對其進行賦值.設(shè)置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft : 當前對象到其上級層左邊的距離.
不能對其進行賦值.設(shè)置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth : 當前對象的寬度.
與style.width屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
