浏览器滚动条相关

先去MDN 查看这两个概念: scrollHeight  以及 clientHeight

1,判断是否存在滚动条

if(element.scrollHeight - element.clientHeight>0) {
  console.log('存在滚动条')
}

2,判断一个容器滚动条,没有在最上面,怎么判断:
   if(element.scrollTop > 0) {
         console.log('滚动条没有在最顶部')
   }

3,判断滚动条是否滑动了最底部
   let isToBottom =element.scrollHeight - element.scrollTop === element.clientHeight
   if(isToBottom) {
     console.log('已经滑动到了最底部')
   }


4,控制滚动条滑动到最底部
element.scrollTop = element.scrollHeight-element.clientHeight (只要大于这个值就可以,你甚至可以设置9999)


横向的同理,快捷方法:



参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

转载于:https://www.cnblogs.com/dongguapifly/p/10627132.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要设置浏览器滚动条加小手效果,可以按照以下步骤操作: 1. 打开浏览器,点击右上角的菜单按钮,选择“设置”。 2. 在设置页面中,找到“外观”或“外观和感觉”选项。 3. 在外观选项中,找到“滚动条”或“滚动条样式”选项。 4. 选择“永远显示滚动条”或“显示滚动条”,这样可以让滚动条一直显示在页面中。 5. 如果想要加小手效果,可以在“滚动条样式”中选择“Mac样式”或“窄滚动条”,这样可以在滚动条上添加小手效果。 以上是一些常见的浏览器设置方法,不同的浏览器可能会略有不同,但大致类似。希望这些信息能够帮助您设置浏览器滚动条加小手效果。 ### 回答2: 要设置浏览器滚动条的小手样式,可以通过CSS样式来实现。具体步骤如下: 1. 首先,在CSS样式表中找到滚动条的样式选择器。通常情况下,滚动条由以下选择器控制: ::-webkit-scrollbar:用于Chrome和Safari浏览器; ::-moz-scrollbar:用于Firefox浏览器; ::-ms-scrollbar:用于IE浏览器。 2. 在选择器中添加以下属性来设置滚动条的小手样式: cursor: pointer; 3. 若要将此样式应用到整个文档中: body::-webkit-scrollbar{ cursor: pointer; } body::-moz-scrollbar{ cursor: pointer; } body::-ms-scrollbar{ cursor: pointer; } 4. 如果要仅将此样式应用到特定的元素,例如一个具有滚动条的div: .scrollable::-webkit-scrollbar{ cursor: pointer; } .scrollable::-moz-scrollbar{ cursor: pointer; } .scrollable::-ms-scrollbar{ cursor: pointer; } 通过使用上述步骤,在滚动条的样式选择器中添加cursor: pointer;属性,就可以将滚动条的鼠标样式设置为小手了。记得在选择器中使用正确的浏览器前缀以兼容不同的浏览器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值