如何让滑动元素回到初始位置,隐藏滚动条等这周遇到的几个问题

这周是我们项目进行的第二周,我们已经知道怎么去上传作自己的那一部分页面,如何几个前端之间进行配合。现在后端正在写接口,没拿到接口的只有我了,他们几个都正在进行前后端交互,加油啊,老哥!说说我这周遇到的几个问题吧(都用原生js写)


1,如何去隐藏滚动条(隐藏水平滚动条,同时显示垂直滚动条)

.element::-webkit-scrollbar {
    display : none;
}
.element {
    scrollbar-width : none;
    -ms-overflow-style : none;
    overflow-x : hidden;
    overflow-y : auto;
}

2,让滑动元素回到初始位置

clickEle.addEventListener('click',function(){
    let back = document.querySelector('element');
    var time = setInterval(function(){
        let top = document.documentElement.scrollTop || document.body.scrollTop //为了浏览器兼容
        if(top === 0){
            clearInterval(time);
        } else {
            document.documentElement.scrollTop = top  - 20;
        }
    },1)

3,如过想让左右固定不动,中间滑动的话,需要给左右的元素设定固定定位,并用中间元素设定margin属性来实现。


今天学长还讲了前端优化的问题,之前居然没有考虑过这个问题

一起加油!!!

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值