javascript - iscroll 问题与二维(水平+垂直)滚动、可滚动是否相关？

Question

问题简介

我有一段有效的二维滚动代码。这样的滚动效果很好。滚动可以在任何方向上完成(不像在 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 检查器面板上会在浏览器 View 中突出显示 dom。什么时候不出现呢？我检查了经过验证的 HTML，如 http://jsfiddle.net/sandeepan_nits/pAhjU/12/ 中所示.

• 有人请创建一个标签 iscroll或iscroll3这样我就可以重新标记我的问题。

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

Answer 1

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

因此，强制双滚动:

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