A special customer requirement: to display data in a table on a page, the data volume is not large. If you do not want to use the browser's scroll bar, you can only scroll The data in the table in the Div, however, a special requirement is that the scroll bar must be automatically rolled to the bottom.
After querying the relevant information, Div does not have the auto-scroll attribute. You can only simulate the scroll of the mouse to achieve the expected results.
The key part is here: div. scrollTop = div. scrollHeight;
The following is the simplified code:
1 2 <body>
3 <div id = "divDetail" style = "overFlow-y: scroll; width: 250px; height: 200px;">
4 <table style = "border: 1px solid;"> www.2cto.com
5 <tr> <td> id </td> <td> name </td> <td> age </td> <td> memo </td> </tr>
6. <tr> <td> 000001 </td> <td> name1 </td> <td> 24 </td> <td> memomemomemomemo </td> </tr>
7 <tr> <td> 000002 </td> <td> name2 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
8 <tr> <td> 000003 </td> <td> name3 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
9 <tr> <td> 000004 </td> <td> name4 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
10 <tr> <td> 000005 </td> <td> name5 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
11 <tr> <td> 000002 </td> <td> name2 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
12 <tr> <td> 000003 </td> <td> name3 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
13 <tr> <td> 000004 </td> <td> name4 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
14 <tr> <td> 000005 </td> <td> name5 </td> <td> 23 </td> <td> memomemomemomemo </td> </tr>
15 </table>
16 </div>
17 </body>
18 <script type = "text/javascript" defer>
19 var div = document. getElementById ('diddetail ');
20
21 div. scrollTop = div. scrollHeight;
22 // alert (div. scrollTop );
23 </script>
24
Author: tbwshc