仅使用滚动条而不是鼠标滚轮滚动答案

【问题标题】：Scrolling only with the scrollbar and not the mousewheel仅使用滚动条而不是鼠标滚轮滚动
【发布时间】：2018-04-20 12:49:17
【问题描述】：

我有一个页面，其中一个 div 有 overflow-y:scroll;

我希望该 div 仅支持使用 scrollbar-track 上的 scrollbar-thumb 滚动，而不支持使用鼠标滚轮滚动。页面应该滚动过去的元素。

页面在电子窗口中呈现，永远不会在它之外使用，因此非常欢迎任何花哨的 webkit 解决方案。

我试图在 JavaScript (jQuery) 中摆弄，在 .on('mousewheel') 事件上返回 false，但这会阻止在悬停 div 并使用鼠标滚轮滚动时滚动 div 周围的页面。

我该怎么做？是否可以仅使用 CSS，或者我需要使用 JavaScript？（这很好）。

这是非常简单的标记

body, html {
	height: 100%;
}
.nomousewheel {
	overflow-y: scroll;
	width: 300px;
	height: 240px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Document</title>
</head>
<body>
	<div class="nomousewheel">
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam accusantium molestiae consectetur, libero rem illum, quia ipsum earum, commodi cum blanditiis hic quae esse reiciendis ut iure dignissimos ex magni? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam accusantium molestiae consectetur, libero rem illum, quia ipsum earum, commodi cum blanditiis hic quae esse reiciendis ut iure dignissimos ex magni? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam accusantium molestiae consectetur, libero rem illum, quia ipsum earum, commodi cum blanditiis hic quae esse reiciendis ut iure dignissimos ex magni?
	</div>
</body>
</html>

【问题讨论】：

标签： javascript html webkit scrollbar vertical-scrolling

【解决方案1】：

请参阅以下网站了解如何处理鼠标滚轮事件。 https://www.sitepoint.com/html5-javascript-mouse-wheel/

基本上你必须监听鼠标滚轮事件并执行 event.preventDeafult() 来停止默认操作。

【讨论】：