javascript - 在 HTML 中嵌入 PDF 文件/出现不需要的鼠标滚轮移动问题

标签 javascript html css pdf embed

有没有人嵌入 PDF 文件以供浏览器查看?

我使用嵌入式 PDF 文件作为一种通过浏览器 (FireFox) 轻松显示报告的方式。实际的 PDF 大约有 10 页长,但 HTML 页面使用嵌入标签编码,并使用开放参数以易于阅读的格式仅显示 PDF 的几个方面。烦人的部分是嵌入的 PDF 部分可能会意外地用鼠标滚轮滚动,这会破坏报告在浏览器中的外观。有没有办法禁用它?

html 有大约 16 个不同的 div,所有 div 都带有嵌入标签,使用开放参数指向同一个 pdf 文档的不同部分...这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>

<META HTTP-EQUIV="REFRESH" CONTENT="2000">
<link rel="stylesheet" type="text/css" href="db.css" />


<script type="text/javascript">
if(document.addEventListener){ /* Chrome, Safari, Firefox */
    document.addEventListener('DOMMouseScroll', stopWheel, false);
} 
function stopWheel(e){
    if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
}
</script>

</head>


<body id="pdf">

<div id="mid" onMouseOver="stopWheel(e);"><embed src="run_rate_original_test.pdf#page=1&toolbar=0&navpanes=0&scrollbar=0&zoom=100,135,400" width="900" height="325"/></div>
<div id="l1"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,105" width="119" height="83"/></div>
<div id="l2"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,105" width="119" height="83"/></div>
<div id="l3"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,105" width="119" height="83"/></div>
<div id="l4"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,233" width="119" height="83"/></div>
<div id="l5"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,233" width="119" height="83"/></div>
<div id="l6"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,233" width="119" height="83"/></div>
<div id="l7"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,361" width="119" height="83"/></div>
<div id="l8"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,361" width="119" height="83"/></div>
<div id="l9"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,361" width="119" height="83"/></div>
<div id="l10"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,489" width="119" height="83"/></div>
<div id="l11"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,489" width="119" height="83"/></div>
<div id="l12"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,489" width="119" height="83"/></div>
<div id="l13"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,617" width="119" height="83"/></div>
<div id="l14"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,617" width="119" height="83"/></div>
<div id="l15"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,835,617" width="119" height="83"/></div>
<div id="l16"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,134,745" width="119" height="83"/></div>
<div id="l17"><embed src="run_rate_original_test.pdf#page=5&toolbar=0&navpanes=0&scrollbar=0&zoom=75,484,745" width="119" height="83"/></div>


</body>
</html>

如您在第一个 div 中所见,我试图使用 javascript 禁用鼠标滚轮,但没有成功。是否有可能的 javascript、html、css 或什至其他解决方案来阻止嵌入式 pdf 文档中不需要的鼠标滚轮滚动?

最佳答案

试试这个

function scroll(){
   return false;
}
document.onmousewheel = scroll;

关于javascript - 在 HTML 中嵌入 PDF 文件/出现不需要的鼠标滚轮移动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5746748/

相关文章:

javascript - 带有句法着色的 Json Pretty Print

html - 如何使用不显示阻止的css3制作向下滑动动画

javascript - 如何使用 jQuery 对固定元素的位置进行动画处理

html - 如何对齐文本字段?

html - 如何在我的网站上将导航栏居中

html - div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

javascript - 跨源资源共享是否会影响连接到 Web 方法的所有客户端?

javascript - 一个非常简单的带有 css 的警告和确认框样式

javascript - 无法理解为什么我的 Javascript 函数不起作用?

html - 单击按钮时它会一直将我导航到页面顶部