二维(水平+垂直)滚动的iscroll问题，可滚动是相关问题吗? [英] iscroll issue with two dimensional ( horizontal + vertical ) scrolling, scrollable are related issue?

问题描述

简要问题

我有一段工作的二维滚动代码.这样滚动可以正常工作.可以在任何方向上滚动(不像在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-<b></b>位于<b></b>内，并且我不确定为什么删除<b></b>标签后，水平滚动不再起作用- 在此处检查.

这是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在可伸缩区域内的显示位置.到目前为止，我还没有找到两种滚动方式(水平+垂直滚动)的有效演示.

我检查了iscroll的文档和许多有效的演示，但没有找到可以滚动的演示两种方式都可以-水平和垂直进行.我检查了 http://cubiq.org/iscroll 中语法"部分下的可接受的选项是:"部分.但是这些参数似乎都不是我要寻找的.

其他内容

• 此外，还有一件事，当我检查给定的滚动演示时，我无法在chrome浏览器中查看dom元素覆盖的区域.通过查看区域，我的意思是将鼠标移到dom检查器面板上，从而在浏览器视图中突出显示dom.什么时候不出现?我使用经过验证的HTML进行了检查，如 http://jsfiddle.net/sandeepan_nits/pAhjU/12/.

• 请有人创建标签iscroll或iscroll3，以便我可以重新标记我的问题.

更新
我只想进行正常的二维滚动，滚动区域正确地位于可见屏幕的内部，因此在回到屏幕外部时应该会反弹.现在，在向着屏幕顶部和左侧滚动时，没有反弹(在我的jsfiddle中).弹回右侧和底部时会发生反弹.我只希望滚动区域放置在屏幕内.我猜反弹然后会自动修复.

解决方案

我认为最新版本(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')时，滚动是垂直和水平的.可以使用这些参数禁用它. 此视频展示了它，因此完全可以使用Dual Scroll.

因此，要强制双滚动:

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

Problem in brief

I have got a piece of working two dimensional scrolling code. Scrolling as such is working fine. Scrolling can be done in any direction (not like restricted to only horizontal or only vertical at a ti,e) but there are two problems -

• Scrolling beyond the visible area towards top and left, does not bounce back the scrollable area.
• Scrolling to right and bottom bounces back.

Problem demo - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Note - Test in webkit browsers only (Google chrome and Safari).

Solution I am looking for

• Either, point out what is wrong in my code.
• Or share any properly implemented working demo of both ways scroll (horizontal + vertical) using the same version of iscroll, so that I can follow the same. I am using - version 3.7.1, preferable, or using iscroll version 4, fine as well.
• Or any pointers, of course, would be appreciated.

Problem Description

Please check working code here - http://jsfiddle.net/sandeepan_nits/pAhjU/6/

Note -

• Test in webkit browsers only (Google chrome and Safari).
• I have knowingly put everything inside the HTML section in the jsfiddle, because if I separate things completely, the scrolling does not work, and I am not sure where exactly it stops working. Thanks if you can point out.

Code

Here is the 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>

Note - I know there is invalid html there - <div id=scroller1> is inside <b></b> and I am not sure why if I remove the <b></b> tags, horizontal scrolling does not work anymore - check here.

Here is the 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);

I guess the reason is that the scrollable div is by default rendered at the bottom-right corner of the scrollable area. But I am not sure about the proper way to configure those things - how to set where to render the scrollable div inside the scollable area. So far I did not find any working demo of both ways scrolling - horizontal + vertical scrolling.

I checked out the documentation of iscroll and many working demos, but did not find any demo where scrolling can be done both ways - horizontally as well as vertically. I checked the "Accepted options are:" section under "Syntax" section in http://cubiq.org/iscroll but none of those params seem to be what I am exactly looking for.

Other things

• Also, one more thing, I am not able to view the area covered by dom elements in chrome browser, while I inspect the given scroll demo. By viewing the area I mean moving the mouse over the dom inspector panel highlights the dom in the browser view. When does it not appear? I checked with validated HTML as in http://jsfiddle.net/sandeepan_nits/pAhjU/12/.

• Somebody please create a tag iscroll or iscroll3 so that I can retag my question.

Update
I just want to have normal two dimensional scrolling with the scroll area being properly inside the visible screen and there should be bounce back on taking outside the screen. Right now there is no bounce back (in my jsfiddle) on scrolling towards top and left, outside screen. Bounce back happens on scrolling to right and bottom. I just want the scrolling area to be well placed inside the screen. I guess bounce back will automatically get fixed then.

解决方案

I think the last version (4.1.8) on the github repo will fix your problem ;) I'm using it on some projects and it is now optimized for desktop browser ;)

Edit

From the documentation :

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.

By default, when creating a new iScroll('idOfElement') the scroll is vertical and horizontal. It can be disabled with these parameters. Dual Scroll is totally possible as this video shows it.

So, to force dual Scroll :

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

这篇关于二维(水平+垂直)滚动的iscroll问题，可滚动是相关问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！