Question

简要问题

我有一块工作的二维滚动代码。这样滚动工作正常。滚动可以在任何方向上进行（不仅限于水平或仅在垂直方向上，但是）有两个问题 -

从可见区域向上和向左滚动，不会使可滚动区域反弹。
向右和向下滚动反弹。

问题演示 - 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中）。向右和向下滚动时会发生反弹。我只想让滚动区域放在屏幕内。我想反弹会自动得到修复。

Answer 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});

Answer 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
});

这并没有多大影响，但我仍然把它。

如果我发现任何新内容，我会继续研究并更新我的答案。

Answer 3

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

它可以通过css进行高度自定义，这里有一个带有垂直和水平滚动的演示：http://jscrollpane.kelvinluck.com/basic.html

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

3 个答案: