Javascript iscroll问题与二维（水平和垂直）滚动、可滚动相关吗？

问题简介

我有一个二维滚动代码。这样的滚动效果很好。滚动可以在任何方向上进行（不像在ti，e处仅限于水平或垂直），但存在两个问题-

• 向上和向左滚动超出可见区域，不会反弹可滚动区域
• 向右滚动和向下滚动会反弹

问题演示-
注意-仅在webkit浏览器中测试（Google chrome和Safari）

我正在寻找的解决方案

• 或者，指出我的代码中的错误
• 或者使用同一版本的iscroll共享任何正确实现的双向滚动（水平+垂直）工作演示，以便我可以遵循相同的方法。我最好使用-3.7.1版，或者使用iscroll版本4，也可以
• 当然，任何指点都将不胜感激

问题描述

请在此处检查工作代码-

注-

• 仅在webkit浏览器中测试（Google chrome和Safari）
• 我故意将所有内容都放在JSFIDLE的HTML部分中，因为如果我完全分离内容，滚动就不起作用，我也不确定它到底在哪里停止工作。如果你能指出的话，谢谢你

代码

这是HTML-

<div class="header">
    <div class='left_link'></div>Demo</div>
    <div id="main_content" class="main_content">

    <b><div id=scroller1><br/> 
    <div class='center_data'>Scrollable area</div>
    <div class='center_data'>hello world!</div>
    <br/> 
    </div></b>

</div>

我猜原因是可滚动div默认呈现在可滚动区域的右下角。但我不确定配置这些东西的正确方法是什么——如何设置在可滚动区域内呈现可滚动div的位置。到目前为止，我还没有找到任何双向滚动-水平+垂直滚动的工作演示

我查看了许多工作演示，但没有发现任何可以同时进行水平和垂直滚动的演示。我在中的“Syntax”部分下选中了“Accepted options are:”部分，但这些参数似乎都不是我想要的

其他事项

• 另外，还有一件事，我无法在chrome浏览器中查看dom元素覆盖的区域，而我正在查看给定的滚动演示。通过查看区域，我的意思是将鼠标移到dom检查器面板上，在浏览器视图中高亮显示dom。它什么时候不出现？我使用验证过的HTML进行了检查，如中所示

• 有人请创建一个标签

  iscroll

  或

  iscroll3

  ，以便我可以重新标记我的问题

更新

---

我只想有正常的二维滚动与滚动区域内的可见屏幕，应该有反弹屏幕外采取正确。现在（在我的JSFIDLE中）在屏幕外向上和向左滚动时没有反弹。在向右和向下滚动时发生反弹。我只是希望滚动区域能够很好地放置在屏幕内。我想反弹将自动得到修复。

这不是一个完整的解决方案，但这可能会帮助您

首先，HTML代码没有正确嵌套，因此需要将

放在

中。我对HTML做了一点修改，没有了

在正确嵌套HTML和正确设置的情况下，即使在分割HTML/JS/CSS之后，这仍然有效

对我来说，它确实显示了一些水平和垂直滚动，但我不知道这是否是你想要的。我还编辑了类初始化行

    myScroll = new iScroll('scroller1', {desktopCompatibility:true});

到

这并没有多大影响，但我还是这么说

我会继续研究这个问题，如果发现任何新的问题，我会更新我的答案。

我认为github回购协议上的内容会解决您的问题；）我在一些项目中使用它，现在它已针对桌面浏览器进行了优化；）

编辑

从文件中：

hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.

默认情况下，创建新的iScroll（“idOfElement”）时，滚动是垂直和水平的。可以使用这些参数禁用它。双滚动是完全可能的，因为它显示

因此，要强制双滚动：

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});

---

我知道您想使用iscorll修复此问题，但我想与您分享，我使用它获得了很好的效果：

---

它可以通过css进行高度定制，这是一个垂直和水平滚动的演示：

首先感谢您的尝试。。。我也更新了问题标题。。。我认为这让人困惑。我在你的JSFIDLE中检查了滚动。看起来水平方向的滚动现在减少了（只移动了一点点）。请检查我的更新滚动必须像我们在屏幕上移动鼠标指针一样。在哪里可以看到使用此版本的2D滚动（水平+垂直）的工作演示？我之前搜索过，但是没有找到。我之前已经检查过了。现在再次检查，但是我看到的所有演示要么是垂直滚动（like），要么是水平滚动（like）。我在什么地方错过了2D演示吗？这些信息非常准确，非常感谢。项目文档确实缺少一些细微差别的特性，但仍然是一个惊人的脚本。

hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
vScroll, same as above for vertical scroll.

var myScroller = new iScroll('idOfElement', {vScroll:true, hScroll:true});