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

div滾動條預設最底部和最右邊的範例

小云云
發布： 2017-12-21 09:38:33
原創
2451 人瀏覽過

有需求，要在顯示聊天框時，固定框的大小為300px高度，寬度50px左右，然後當聊天內容超出寬度或高度時會出現滾動條，並且垂直滾動條要默認最底部，以便顯示最新消息，水平滾動條一般都是預設最左，本文就為大家分享一篇實現p滾動條預設最底部以及預設最右邊的範例程式碼非常簡潔，具有很好的參考價值，希望對大家有所幫助。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>实现p滚动条默认最底部以及默认最右边</title> 
  <script type="text/javascript" src="jquery文件地址"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(&#39;#scroll_p&#39;).scrollTop( $(&#39;#scroll_p&#39;)[0].scrollHeight);
  $(&#39;#scroll_p&#39;).scrollLeft( $(&#39;#scroll_p&#39;)[0].scrollWidth);
 });
</script>
<body>


<p id="scroll_p" style="overflow-y:scroll; overflow-x:scroll;width:50px; height:300px; border:1px solid #F00;">
  pCSS5测试内容，欢迎来到pCSS5学习p+CSS技术。大家可以通过pCSS5主站上的所有免费CSS教程足可学会p CSS技术 -如果需要深入系统学习、较短时间达到理想学习效果可参加p+CSS培训班学习。
</p>
</body> 
</html>
登入後複製

學完本文大家學會了嗎？趕快動手嘗試。

相關推薦：

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

設定DIV捲軸屬性與樣式的方式介紹

js判斷瀏覽器與hack捲軸的實例詳解

#

以上是div滾動條預設最底部和最右邊的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
右邊 底部 範例
來源：php.cn
上一篇：詳解js判斷內容區域是否滾動到底部 下一篇：div滑動到底部的scroll程式碼詳解
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
9
1588
PHP數組從URL參數中取得的行為不如預期 我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...
來自於 2024-04-06 22:09:02
0
1
1428
透過新增 Width 屬性將內容向左移動 我已經為主體提供了邊距。主要{左邊緣：200px;右邊距：200px；文本對齊：居中}由於我想以兩行而不是一行顯示文本，因此我在樣式中添加了width屬性。 .p{字體大小：12p...
來自於 2024-04-06 22:01:35
0
3
816
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
如何從結果集中僅顯示最低值（MYSQL） 我有以下聲明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
來自於 2024-04-06 21:44:19
0
1
603
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！