简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

div內部捲軸滾動到底部和頂部功能的實現

小云云
發布： 2017-12-21 09:31:56
原創
3927 人瀏覽過

關於div內部滾動條滾動到底部和頂部功能的實現，本文就為大家分享一篇實現p內部滾動條滾動到底部和頂部的代碼，代碼簡潔，具有很好的參考價值，希望能幫助到大家。

實例如下圖所示：


#
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrollp{
			width: 500px;
			height: 400px;
			margin: 10px auto;
			background: #f00;
			overflow-y: scroll;
			padding: 10px;
		}
	</style>
</head>
<body>
<p class="scrollp" id="testp">
	<br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
	var pscroll=document.getElementById(&#39;testp&#39;);
	function pScroll(){
		var scrollTop=pscroll.scrollTop;//页面上卷的高度
		var wholeHeight=pscroll.scrollHeight;//页面底部到顶部的距离
		var pHeight=pscroll.clientHeight;//页面可视区域的高度
		if(scrollTop+pHeight>=wholeHeight){
			alert(&#39;我到底部了&#39;);
		}
		if(scrollTop==0){
			alert(&#39;我到顶部了&#39;)；
		}
	}
	pscroll.onscroll=pScroll;
</script>
</body>
</html>
登入後複製

大家學會了嗎？思路都是一樣的趕快動手嘗試。

相關推薦：

基於滾動條位置判斷的簡單實例_javascript技巧

設定DIV滾動條屬性與樣式的方式介紹

javaScript捲軸事件的實例詳解

#

以上是div內部捲軸滾動到底部和頂部功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
底部 捲動 頂部
來源：php.cn
上一篇：實例詳解Js判斷H5上下滑動方向 下一篇：詳解js判斷內容區域是否滾動到底部
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...
來自於 2024-04-06 17:40:41
0
2
410
狀態更新在 Android 上的 React-Native 中不起作用 我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將isImage2Active設為狀態，然後只需切...
來自於 2024-04-06 16:54:10
0
1
410
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！