二维（水平+垂直）滚动的iscroll问题，可滚动是相关问题吗？答案

【问题标题】：iscroll issue with two dimensional ( horizontal + vertical ) scrolling, scrollable are related issue?二维（水平+垂直）滚动的iscroll问题，可滚动是相关问题吗？
【发布时间】：2011-10-12 12:26:32
【问题描述】：

问题简介

我有一段工作二维滚动代码。这样滚动工作正常。滚动可以在任何方向进行（不像仅限于水平或仅在 ti,e 处垂直）但有两个问题 -

向上和向左滚动超出可见区域，不会反弹回可滚动区域。
向右和底部滚动会弹回。

问题演示 - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
注意 - 仅在 webkit 浏览器（Google chrome 和 Safari）中测试。

我正在寻找的解决方案

或者，请指出我的代码中的问题。
或者使用相同版本的 iscroll 共享任何正确实现的双向滚动（水平 + 垂直）工作演示，以便我可以遵循相同的操作。我正在使用 - 版本 3.7.1，更可取，或者使用 iscroll 版本 4，也可以。
当然，任何指针都将不胜感激。

问题描述

请在此处查看工作代码 - http://jsfiddle.net/sandeepan_nits/pAhjU/6/

注意 -

仅在 webkit 浏览器中进行测试（Google chrome 和 Safari）。
我故意将所有内容都放在了 jsfiddle 的 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>

注意 - 我知道那里有无效的 html - <div id=scroller1> 在 <b></b> 内，我不知道为什么如果我删除 <b></b> 标签，水平滚动不再起作用 - check here.

这里是 js -

    var myScroll;
    var a = 0;
    function loaded() {
        //setHeight();  // Set the wrapper height. Not strictly needed, see setHeight() function below.

        // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
        myScroll = new iScroll('scroller1', {desktopCompatibility:true});
        //myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});

    }


    // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
    // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // Load iScroll when DOM content is ready.
    document.addEventListener('DOMContentLoaded', loaded, false);

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

我查看了documentation of iscroll 和许多工作演示，但没有找到任何可以双向滚动的演示 - 水平和垂直。我检查了http://cubiq.org/iscroll 中“语法”部分下的“接受的选项是：”部分，但这些参数似乎都不是我想要的。

其他事情

另外，还有一件事，当我检查给定的滚动演示时，我无法在 chrome 浏览器中查看 dom 元素覆盖的区域。通过查看该区域，我的意思是将鼠标移到 dom 检查器面板上，在浏览器视图中突出显示 dom。什么时候不出现？我检查了经过验证的 HTML，如 http://jsfiddle.net/sandeepan_nits/pAhjU/12/。
有人请创建标签iscroll 或iscroll3，以便我可以重新标记我的问题。

更新
我只想进行正常的二维滚动，滚动区域正确地位于可见屏幕内，并且应该在屏幕外反弹。现在，在屏幕外向上和向左滚动时没有反弹（在我的 jsfiddle 中）。反弹发生在滚动到右侧和底部时。我只是希望滚动区域能够很好地放置在屏幕内。我猜反弹会自动得到修复。

【问题讨论】：

标签： javascript scroll mobile-website iscroll4

【解决方案1】：

我认为 github repo 上的 last version (4.1.8) 可以解决您的问题；）我在一些项目中使用它，现在它已针对桌面浏览器进行了优化；）

编辑

来自文档：

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') 时，滚动是垂直和水平的。可以使用这些参数禁用它。正如this video 所示，双滚动是完全可能的。

所以，强制双滚动：

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

【讨论】：

在哪里可以看到使用此版本的 2D 滚动（水平 + 垂直）的工作演示？我之前搜索过但找不到。
我之前已经检查过了。现在再次检查，但我看到的所有演示都是仅垂直滚动（如cubiq.org/dropbox/iscroll4/examples/custom-scrollbar）或仅水平滚动（如cubiq.org/dropbox/iscroll4/examples/carousel）。我是否错过了某个地方的 2D 演示？
非常感谢您提供此信息。项目文档确实缺少这些细微差别的功能，但仍然是一个了不起的脚本。

【解决方案2】：

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

首先，HTML 代码没有正确嵌套，因此您需要将<div> 放在<b> 中。我稍微修复了 HTML，它在没有 <b>

的情况下工作

http://jsfiddle.net/Aexhz/

并且使用正确嵌套的 HTML 和正确的设置，即使在分割 HTML/JS/CSS 之后也能正常工作

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

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

到

myScroll = new iScroll('scroller1', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    vScrollbar: false,
    desktopCompatibility: true
});

这并没有太大影响，但我还是这么说的。

如果我发现任何新内容，我将继续调查并更新我的答案。

【讨论】：

首先感谢您的尝试...我也更新了问题标题...我认为这很混乱。我检查了你的jsfiddle中的滚动。看起来水平方向的滚动现在减少了（只移动了一点点）。请检查我的更新
滚动就像我们在屏幕上移动鼠标指针一样

【解决方案3】：

我知道您想使用 iscorll 解决此问题，但想与您分享，我使用它取得了很好的效果：http://jscrollpane.kelvinluck.com/#usage

它是高度可定制的 css，这里有一个带有垂直和水平滚动的演示：http://jscrollpane.kelvinluck.com/basic.html

【讨论】：