通过改变scrollTop使元素滚动

.gift{background: red;width: 100px;height: 200px;overflow: hidden;}
<div class="gift">
    <p>2</p>
    <p>2222</p>
    <p>2222</p>
    <p>233333</p>
    <p>24444</p>
    <p>25555</p>
    <p>26666</p>
    <p>26666342356</p>
    <p>265y34757</p>
    <p>2</p>
    <p>2222</p>
    <p>2222</p>
    <p>233333</p>
    <p>24444</p>
    <p>25555</p>
    <p>26666</p>
    <p>26666342356</p>
    <p>265y34757</p>
</div>
$(window).click(function(){
        var gift = $(".gift")[0];
        //gift.style.height = gift.offsetHeight - 20 + 'px';// 改变元素的高度
        gift.scrollTop += 2;
    });

 注意设置元素overflow:hidden;

转载于:https://www.cnblogs.com/chuyu/p/3456036.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格内容滚动,表头不变,可以采用固定表头的方式,即将表头放在一个独立的元素中,表格内容放在另一个元素中,通过设置表格内容元素的样式属性 overflow: auto; 并固定表头元素的位置,来实现表格内容的滚动。 具体步骤如下: 1. HTML 结构 ``` <div class="table-container"> <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>内容1-1</td> <td>内容1-2</td> <td>内容1-3</td> </tr> <tr> <td>内容2-1</td> <td>内容2-2</td> <td>内容2-3</td> </tr> ... </tbody> </table> </div> ``` 2. CSS 样式 ``` .table-container { position: relative; overflow: hidden; height: 300px; /* 设置表格内容的高度 */ } table { width: 100%; border-collapse: collapse; } thead th { background-color: #eee; position: sticky; top: 0; } tbody { overflow-y: auto; height: calc(100% - 30px); /* 30px = 表头的高度 */ } ``` 3. JavaScript 代码 ``` // 获取表格内容元素和表头元素 var tableContainer = document.querySelector('.table-container'); var tableHead = document.querySelector('thead'); var tableBody = document.querySelector('tbody'); // 监听表格内容的滚动事件 tableBody.addEventListener('scroll', function() { // 获取表格内容的滚动距离 var scrollTop = tableBody.scrollTop; // 将表头固定在顶部 tableHead.style.transform = 'translateY(' + scrollTop + 'px)'; }); ``` 这样,就实现了表格内容的滚动,表头不变的效果。需要注意的是,这种方式只适用于表格内容较小的情况,如果表格内容非常大,可能会影响性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值