link rel="stylesheet" href="/Public/ruthWeb/lib/pdfjs/web/viewer.css">
<link rel="resource" type="application/l10n" href="/Public/ruthWeb/lib/pdfjs/web/locale/locale.properties">
<script src="/Public/ruthWeb/lib/pdfjs/build/pdf.js"></script>
<script src="/Public/ruthWeb/lib/pdfjs/build/pdf.worker.js"></script>
<script src="/Public/ruthWeb/lib/pdfjs/web/viewer.js"></script>
mousewheel事件
<!-- html里我用的 angular写的,也可以直接在js中监听 mousewheel 方法 -->
<div class="thumbnail-content scroll-bar"
(mousewheel)="mousewheel($event)"
(DOMMouseScroll)="mousewheel($event)">
</div>
注意: 鼠标滚轮滚动事件 mousewheel()。但是火狐浏览器不兼容此方法,火狐浏览器的鼠标滚轮滚动事件为 DOMMouseScroll()
mousewheel(event: any) {
// ctrl键按下了 event.ctrlKey
if (event.ctrlKey) {
// 取消浏览器默认的放大缩小网页行为
event.preventDefault();
if (event.wheelDelta < 0 || event.detail < 0) {
// 鼠标滚轮往下滚动
...
} else if (event.wheelDelta > 0 || event.detail > 0) {
// 鼠标滚轮往上滚动
...
}
}
}
————————————————
window.addEventListener('wheel', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, { passive: false });
//firefox
window.addEventListener('DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, { passive: false })
鼠标滚动方向
<div class="layout">
<div class="body">
内容区域
</div>
<div class="nav">
<p>导航区域</p>
</div>
</div>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).on("mousewheel DOMMouseScroll", function (e) {
// jq 获取dom 事件对象要通过originalEvent
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
// chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
$('.nav').slideUp(600);
} else if (delta < 0) {
// 向下滚
$('.nav').slideDown(600);
}
});
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_42667613/article/details/115123715