禁用滚动条并启用鼠标滚轮滚动和仅触摸滚动

Question

是否可以从浏览器中禁用滚动条，仅允许用户使用鼠标滚轮滚动网页并触摸滚动条（在移动设备中）以在div中上下移动？

基于这个想法：

HTML：

<style>
html, body {
height: 100%;   
}
div {
width: 100%;
height: 100%;
background-size: cover;
}
</style>
<body>
<div id="div01" style="background: red"></div>
<div id="div02" style="background: blue"></div>
<div id="div03" style="background: green"></div>
</body>

JS：

var div01 = $("#div01");
var div02 = $("#div02");
var div03 = $("#div03");
div01.click(function() {
    $("html, body").animate({ scrollTop: div02.offset().top }, 1500);
}); 
div02.click(function() {
    $("html,body").animate({ scrollTop: div03.offset().top }, 1500);        
});

这是带有单击事件的代码，可转到下一个div，如何将其更改为鼠标滚轮并触摸滚动而不是单击？ 并在向上滚动时添加以前的div代码吗？

感谢您的时间！

Answer 1

它将为您服务

 *{margin:0;} #container-main{ height: 100%; width: 100%; overflow: hidden; } #container-sub{ width: 100%; height: 99%; overflow: auto; padding-right: 15px; } html, body{ height: 99%; overflow:hidden; }

 <div id="container-main"><div id="container-sub"> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> hello<br/>test1<br/>test2<br/>test3<br/> good<br/>bye. </div><div>

禁用滚动条并启用鼠标滚轮滚动和仅触摸滚动

问题描述

1 个解决方案

解决方案1
0

禁用滚动条并启用鼠标滚轮滚动和仅触摸滚动

问题描述

1 个解决方案

解决方案1 0

解决方案1
0