如何让滚动条自动滚到最底部
让滚动条自动滚到最底部的方法：首先在DIV的底部添加一隐藏元素“element”；然后调用“element.scrollIntoView()”方法；最后使元素滚动到可视区域即可。
如何让滚动条自动滚到最底部？
让DIV中的垂直滚动条自动滚到最底部
在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部，这样就会导致之后的消息看不见，必须往下拖动滚动条才能看到新的消息，如果做到当出现滚动条时，滚动条始终位于DIV的底部呢？
方式一：设置DIV的scrollTop=scrollHeight;
方式二：在DIV的底部添加一隐藏元素element，然后调用element.scrollIntoView()。这里的scrollIntoView是原生的方法，通过名称我们就不难发现该方法用来使元素滚动到可视区域。
为了简单起见直接将两种方式放在一起。
<html>
<head>
<style type="text/css">
div{margin:0px;padding:0px;}
#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}
#content{width:350px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var i=1;
var hid=document.getElementById('msg_end');//隐藏在消息框下面的元素
var btn=document.getElementById('btnSend');//添加消息的按钮
var cont=document.getElementById('content');//消息框
var mai=document.getElementById('main');
btn.onclick=function(){
cont.innerHTML+='消息内容'+i+'<br/>';
//hid.scrollIntoView(false);//方式1通过调用隐藏元素的scrollIntoView()方法使其可见
//mai.scrollTop=mai.scrollHeight;//方式2通过设置滚动高度
i++;
}
}
</script>
</head>
<body>
<div id="main">
<div id="content"></div>
<span id="msg_end" style="overflow:hidden"></span>
</div>
<input type="button" id="btnSend" value="添加"/>
</body>
</html>效果如下，滚动条始终最底部
更多相关知识，请访问PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Microsoft membawa bar skrol Fasih Windows 11 ke Google Chrome
Apr 14, 2023 am 10:52 AM
Tidak seperti Windows 10, Windows 11 menampilkan "bar skrol cecair" moden baharu yang berubah bentuk apabila pengguna berinteraksi dengannya. Bar skrol fasih bersifat dinamik, ia berskala secara automatik dalam faktor bentuk yang berbeza atau apabila anda menukar saiz tetingkap, dan pada masa ini ia digunakan dalam apl seperti Tetapan, Pemain Media dan banyak lagi. Google Chrome mungkin mempunyai fungsi bar skrol yang lancar tidak lama lagi, menurut cadangan baharu daripada Microsoft. Microsoft mengatakan dalam cadangan bahawa mereka mahu memodenkan bar skrol lama dalam Chrome
Bagaimana untuk menyembunyikan penatalan bar skrol dalam tindak balas
Dec 21, 2022 pm 03:38 PM
Bagaimana untuk menyembunyikan skrol bar skrol dalam bertindak balas: 1. Buka fail "react-native" yang sepadan 2. Tetapkan skrol mendatar melalui mendatar 3. Sembunyikan bar skrol mendatar dengan menetapkan nilai "showsHorizontalScrollIndicator" kepada "false".
Cara menetapkan bar skrol agar sentiasa dipaparkan pada sistem Mac - Cara menetapkan bar skrol agar sentiasa dipaparkan
Mar 18, 2024 pm 06:22 PM
Baru-baru ini, beberapa rakan telah merujuk kepada editor tentang cara menetapkan bar skrol sistem Mac untuk sentiasa dipaparkan . Langkah 1: Dalam menu mula sistem, pilih pilihan [System Preferences]. Langkah 3: Pada halaman Keutamaan Sistem, pilih pilihan [Umum]. Langkah 3: Pada halaman umum, pilih [Sentiasa] untuk memaparkan bar skrol.
Bagaimana untuk membuat bar skrol html
Feb 22, 2024 pm 03:24 PM
Cara membuat bar skrol HTML memerlukan contoh kod khusus Dalam reka bentuk web, bar skrol adalah elemen biasa yang membolehkan halaman web mudah ditatal apabila terdapat terlalu banyak kandungan. Artikel ini akan memperkenalkan cara membuat bar skrol menggunakan HTML dan memberikan contoh kod khusus. Pertama, kita perlu memahami prinsip asas mencipta bar skrol dalam HTML. Gaya CSS boleh digunakan dalam HTML untuk mengawal penampilan dan kelakuan bar skrol. Secara khusus, kita boleh menggunakan sifat CSS untuk menetapkan bar skrol termasuk sifat yang biasa digunakan
Bagaimana untuk mendayakan atau melumpuhkan bar skrol yang sentiasa dipaparkan dalam Windows 11?
Apr 24, 2023 pm 05:58 PM
Sistem pengendalian Windows membolehkan pengguna menentukan sama ada bar skrol harus disembunyikan secara automatik apabila ia tidak aktif atau tidak digunakan. Windows, sebaliknya, mendayakan bar skrol secara lalai. Jika mana-mana pengguna ingin mendayakan atau melumpuhkan ciri ini pada sistem mereka, sila rujuk artikel ini untuk membantu mereka mengetahui caranya. Cara mendayakan atau melumpuhkan bar skrol sentiasa hidup dalam Windows 11 1. Menekan dan menahan kekunci Windows+U akan membuka halaman Kebolehcapaian pada sistem anda. 2. Pilih kesan visual dengan mengklik padanya, ia terletak di bahagian atas halaman Kebolehcapaian. 3. Jika anda ingin mendayakan ciri Sentiasa Tunjukkan Bar Tatal pada sistem anda, klik butang togol Sentiasa Tunjukkan Bar Tatal untuk menghidupkannya seperti yang ditunjukkan di bawah. 4. Anda sentiasa boleh menunjukkan
Cara mengodkan kotak teks bar skrol HTML
Feb 19, 2024 pm 07:38 PM
Tajuk: Cara menulis kod kotak teks HTML dengan bar skrol Kotak teks dalam HTML ialah salah satu kawalan input pengguna yang biasa digunakan Dalam sesetengah kes, apabila kandungan teks terlalu panjang, kotak teks akan dipaparkan tidak lengkap. Pada masa ini, kita boleh menambah bar skrol pada kotak teks untuk menyokong penatalan. Artikel ini akan memperkenalkan secara terperinci cara menulis kod kotak teks HTML dengan kesan bar skrol, dan memberikan contoh kod khusus. 1. Gunakan elemen textarea untuk mencipta kotak teks Dalam HTML, kami menggunakan elemen textarea untuk mencipta kotak teks.
Bagaimana untuk menyedari bar skrol tidak menduduki ketinggian dalam css
Feb 01, 2023 am 09:27 AM
Bagaimana untuk melaksanakan bar skrol dalam CSS tanpa menduduki ketinggian: 1. Buka fail HTML yang sepadan 2. Cari kod asal "overflow-x: auto;" 3. Tukar nilai dalam "overflow-x: auto;"; kepada " overflow-x: overlay;" boleh membuat bar skrol tidak menduduki kedudukan.
Chrome akan datang ke bar skrol bertindih gaya Windows 11
Apr 23, 2023 pm 06:40 PM
Seperti yang diketahui oleh kebanyakan kita sekarang, sistem pengendalian Microsoft baharu Windows 11 menampilkan bar skrol tindanan yang berubah bentuk apabila kita mendekati atau menggunakannya. Anda mungkin berminat untuk mengetahui bahawa ciri dinamik yang sama juga sedang diuji dalam penyemak imbas Chromium. Ini pada asasnya bermakna bahawa versi percubaan Windows 11 penyemak imbas Chrome yang akan datang mungkin mempunyai fungsi bar skrol tindanan tidak lama lagi. Chrome akan mempunyai bar skrol tindanan gaya Windows 11 tidak lama lagi, yang syarikat teknologi berasaskan Redmond telah menguji dalam penyemak imbas web Edge berasaskan Chromium sejak Ogos 2021.
