JavaScript实现 无滚动条(隐藏滚动条)的滚动功能 兼容常见浏览器

本文介绍如何使用JavaScript在不显示滚动条的情况下实现页面滚动功能,代码简洁,无需额外的DOM节点,兼容常见浏览器。提供了测试示例,易于复制使用。
摘要由CSDN通过智能技术生成

JavaScript实现 无滚动条(隐藏滚动条)的滚动功能 兼容常见浏览器

先上DJ 不对 先上代码
js代码

function scroll(element,stap=3){
   
	let userAgentInfo = navigator.userAgent,
		Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"],
		flag = true;
	for (var v = 0; v < Agents.length; v++) {
   
		if (userAgentInfo.indexOf(Agents[v]) > 0) {
   
			return;
		}
	}
	element.style.overflowY = 'hidden';
	stap*=33;	//取综合各浏览器滚动一次的值 约为33 可以根据不同浏览器来设置不同的值
	element.addEventListener('wheel',function(e){
   
		e.preventDefault();
		let scroll = element.firstElementChild,
			length = e.deltaY>0?-1:1,
			scrollTopMax=element.scrollHeight-element.clientHeight;

		// 滑动到底部时触发事件
		if (scrollTopMax<=0){
   
			if (e.deltaY>0)return;
		}
		// 滑动到顶部时触发事件
		if (scroll.style.marginTop <= 0 || scroll.style.marginTop=='calc(0px)'){
   
			if (e.deltaY<0)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值