- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello everyone, I spend last entire day researching for a solution for this problem that I'm not sure even if it's possible to be solved!
All my application I have build in Intel and even the templates ones have the same issue, and I just realized this when I need to work with a Grid!
While I was testing my grid, I was scrolling the data on the grid with the finger, and then I realize that some times when reach the end of the grid data, the screen starts "scrolling" too (vertically)!
So, my question is how to fix it ? How to Lock the screen to prevent this kind of issue ?
Note: You have a "gap" when you scroll up or down!
Note: I don't want to lock the Orientation of the screen!
By the way follow a picture of the problem I'm facing!
Thanks!
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hamilton Tenório da Silva wrote:
@Rodrigo>
Try to put this line in config.additions.xml:
<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />I am not sure if this affect iOS too.
Hi Hamilton, I have checked my config.additions.xml file, and it's already have this line on it ! Really strange...
By the way I was able to use some javascript to prevent that!
Follow the javascript code if anyone needs it ! Just put in a global class javascript file and load up on all "forms" and it will do the job!
// Function to disable "pull-to-refresh" effect present in some webviews. // Especially Crosswalk 12 and above (Chromium 41+) runtimes. window.addEventListener('load', function() { var lastTouchY = 0 ; var maybePreventPullToRefresh = false ; // Pull-to-refresh will only trigger if the scroll begins when the // document's Y offset is zero. var touchstartHandler = function(e) { if( e.touches.length != 1 ) { return ; } lastTouchY = e.touches[0].clientY ; // maybePreventPullToRefresh = (preventPullToRefreshCheckbox.checked) && (window.pageYOffset == 0) ; maybePreventPullToRefresh = (window.pageYOffset === 0) ; //document.getElementById('txtLog').textContent = "maybePreventPullToRefresh: " + maybePreventPullToRefresh; }; // To suppress pull-to-refresh it is sufficient to preventDefault the // first overscrolling touchmove. var touchmoveHandler = function(e) { var touchY = e.touches[0].clientY ; var touchYDelta = touchY - lastTouchY ; lastTouchY = touchY ; if (maybePreventPullToRefresh) { maybePreventPullToRefresh = false ; //if (touchYDelta > 0) { e.preventDefault() ; //document.getElementById('txtLog').textContent = "TouchY: " + touchYDelta; // console.log("pull-to-refresh event detected") ; return ; //} } // if (preventScrollCheckbox.checked) { // e.preventDefault() ; // return ; // } // if (preventOverscrollGlowCheckbox.checked) { // if (window.pageYOffset == 0 && touchYDelta > 0) { // e.preventDefault() ; // return ; // } // } }; document.addEventListener('touchstart', touchstartHandler, false) ; document.addEventListener('touchmove', touchmoveHandler, false) ; }) ;
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
i recommend adding the CSS overflow property to the component that you would like to prevent scrolling on.
Here is a resource on overflow property: http://www.w3schools.com/cssref/pr_pos_overflow.asp
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Elroy Ashtian Jr (Intel) wrote:
i recommend adding the CSS overflow property to the component that you would like to prevent scrolling on.
Here is a resource on overflow property: http://www.w3schools.com/cssref/pr_pos_overflow.asp
Hi Elroy, thanks for the tip, but the problem is with the entire whole screen, not with the components!
If you create any app with Intel, compile and install on your iphone, and slide your finger on the screen vertically, you will see a gap between your app "form" from top or botton!
Do you know what I mean ?
Thanks!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Rodrigo>
Try to put in your main CSS:
body {
overflow-x:hidden;
...
I am not sure, but I have some apps with this and they don´t drag the screen.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hamilton Tenório da Silva wrote:
@Rodrigo>
Try to put in your main CSS:
body {
overflow-x:hidden;
...I am not sure, but I have some apps with this and they don´t drag the screen.
Hi Hamilton, thanks for the help, but I still facing the problem!
I have created a new app for test without any code... just with a header and button on it to test if I can lock the screen, but no success...
Maybe I'm doing something wrong... but in this app I just added to the command line on app.css !
Actually I have added both lines:
body {
overflow-x: hidden;
overflow-y: hidden;
/* margin: 0.5rem ; */
background: white ;
color: black ;
}
I'm attach the application template that just contais a header and button without any code... just with the app.css changed (added those codes) and still not locking the screen!
Please let me know if I'm doing something wrong!
Thanks!
Regards,
Rodrigo.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Rodrigo>
Try to put this line in config.additions.xml:
<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />
I am not sure if this affect iOS too.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hamilton Tenório da Silva wrote:
@Rodrigo>
Try to put this line in config.additions.xml:
<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />I am not sure if this affect iOS too.
Hi Hamilton, I have checked my config.additions.xml file, and it's already have this line on it ! Really strange...
By the way I was able to use some javascript to prevent that!
Follow the javascript code if anyone needs it ! Just put in a global class javascript file and load up on all "forms" and it will do the job!
// Function to disable "pull-to-refresh" effect present in some webviews. // Especially Crosswalk 12 and above (Chromium 41+) runtimes. window.addEventListener('load', function() { var lastTouchY = 0 ; var maybePreventPullToRefresh = false ; // Pull-to-refresh will only trigger if the scroll begins when the // document's Y offset is zero. var touchstartHandler = function(e) { if( e.touches.length != 1 ) { return ; } lastTouchY = e.touches[0].clientY ; // maybePreventPullToRefresh = (preventPullToRefreshCheckbox.checked) && (window.pageYOffset == 0) ; maybePreventPullToRefresh = (window.pageYOffset === 0) ; //document.getElementById('txtLog').textContent = "maybePreventPullToRefresh: " + maybePreventPullToRefresh; }; // To suppress pull-to-refresh it is sufficient to preventDefault the // first overscrolling touchmove. var touchmoveHandler = function(e) { var touchY = e.touches[0].clientY ; var touchYDelta = touchY - lastTouchY ; lastTouchY = touchY ; if (maybePreventPullToRefresh) { maybePreventPullToRefresh = false ; //if (touchYDelta > 0) { e.preventDefault() ; //document.getElementById('txtLog').textContent = "TouchY: " + touchYDelta; // console.log("pull-to-refresh event detected") ; return ; //} } // if (preventScrollCheckbox.checked) { // e.preventDefault() ; // return ; // } // if (preventOverscrollGlowCheckbox.checked) { // if (window.pageYOffset == 0 && touchYDelta > 0) { // e.preventDefault() ; // return ; // } // } }; document.addEventListener('touchstart', touchstartHandler, false) ; document.addEventListener('touchmove', touchmoveHandler, false) ; }) ;
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Rodrigo> Thank you for the script. I will test it too.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page