如何强制用户必须在iframe中滚动pdf [英] How to enforce user must scroll pdf within iframe

问题描述

我在iframe中有一个pdf文件。我希望用户在提交表单之前滚动必须在pdf文件中。我正在尝试这个，

I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this,

var position = $('#myIframe').contents().scrollTop();  

但不工作。请帮助我提前谢谢。

But not working. Please help me Thanks in advance.

推荐答案

如果您不介意为iframe制作静态高度，我有一个解决方案为了你。

If you don't mind making a static height for your iframe, I have a solution for you.

HTML和CSS

1.将您的iframe包装在 div container

2.为容器和iframe（ height ）设置高度容器应该是 height 你希望看到你的框架，而iframe height 应该足够大以显示整个pdf 。）

3.将容器div的溢出设置为滚动

HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll

现在你有一个可滚动的iframe。

Now you have a scrollable "iframe".

Javscript

1. 获取容器元素。 （ var containerEl = $（＃container）[0]; ）


2. 写一个滚动功能。在scroll函数中查找元素的总高度（ scrollHeight ）是否小于或等于滚动了多少（ scrollTop ）加上
   元素的内部高度（ clientHeight ）。如果是，请从按钮中删除已禁用属性

1. Get container element. (var containerEl = $("#container")[0];)
2. Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the element. If it is, remove disabled property from button

这是小提琴。对@mJunaidSalaat的jsfiddle做了一些修改。

Here's the fiddle. Made some changes to @mJunaidSalaat's jsfiddle.

这篇关于如何强制用户必须在iframe中滚动pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！