Question

我有一个div有overflow-y:scroll;

的页面

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

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

我试图在JavaScript（jQuery）中使用false在.on('mousewheel')事件上进行操作，但是当悬停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>

Answer 1

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

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

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

1 个答案: