无限滚动无法离线使用

Question

我正在尝试从实际示例中学习jQuery，尤其是jScroll。 我发现这个网站对您来说可能看起来很愚蠢，但是它简直太简单了，因此这对我来说是jScroll工作的一个很好的例子。

当我尝试将网页（Ctrl + S或仅将页面另存为）保存到计算机以供离线使用时，就会发生问题。 滚动不起作用。 这只是一个静态页面。 我已经在Chrome和Firefox中尝试过。

你也会这样吗？ 如果可以的话，是否有一个简单的解释为什么它不起作用？

Answer 1

tl; dr通过来自http://endless.horse/ ajax请求动态添加马的腿，这是一个跨域的http请求，因此出于浏览器安全性的原因而受到限制。 另外，您将需要运行服务器以允许ajax请求。

https://developer.chrome.com/extensions/xhr https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

触发滚动事件后，它会拉入http://endless.horse/legs.html并将其附加到html上，以不断“增长”腿部。 它在本地不起作用有两个原因：

1. 出于安全原因，不允许跨域HTTP请求。 https://developer.chrome.com/extensions/xhr
2. 您需要通过HTTP服务器运行html文件才能使ajax正常工作。 保存页面并打开后，URL以类似于以下file:/// -这是因为您是直接打开文件，而不是通过Web服务器运行它。

如果您正在运行OSX或Linux，则可以使用python创建一个简单的服务器。 1.打开终端2. cd /path/to/horse/project 3. python -m SimpleHTTPServer 5000 4.访问http：// localhost：5000 /

在Windows上，下载XAMPP并按照说明进行操作。

代替使用“另存为”功能，在要提供服务的文件夹的根目录下创建一个新的index.html 。 在http://endless.horse/上查看源代码，将其复制/粘贴到新文件中。 “另存为”功能对保存的HTML文件进行了大量编辑。 您必须执行此操作，并确保index.html文件正确链接到jquery.jscroll.js和legs.html文件。