div 文章内容自动分屏显示

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhoudemo/p/3242175.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的滚动视图翻页功能，通过调整div的高度和使用按钮控制上下翻页，适用于固定宽度和高度的显示区域。

<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        var height = 0;

        function previousPage() {
            if (height > 0) {
                height -= 280;
            }
            var e = document.getElementById("content");
            e.scrollTop = height;
        }

        function nextPage() {
            height += 280;
            var e = document.getElementById("content");
            e.scrollTop = height;
        }
    </script>
</head>
<body>
    <div id="content" runat="server" style="width: 500px; height: 400px; overflow: scroll;
        overflow-x: hidden; overflow-y: hidden;">
    </div>
    <div>
        <input type="button" value="上一页" onclick="previousPage();" id="btnPreviousPage" />
        <input type="button" value="下一页" onclick="nextPage();" id="btnNextPage" />
    </div>
</body>

触摸屏飘过，搞死了

转载于:https://www.cnblogs.com/zhoudemo/p/3242175.html