Simple touch-scroll-slide system for a magazine

I'm developing a publishing engine and trying to find better ways to optimize the code. The end result is to have an open-source alternative to publish content on mobile devices.

For now, though, I have a touch-scroll-slide system I have created from a modified scroll system found elsewhere. There is a peculiar hesitation while doing slides (horizontally) on a mobile device (mostly iPad 1) while in portrait, yet the landscape version works very well. It is jQuery-based.

I realize there are other portions of the larger project which may be dragging the behaviour down, but don't want to overwhelm people with code at this time. The end result (so far) is viewable here.

The code function for scroll-slide is here:

```
(function($){
$.fn.jScrollTouch = function () {
return this.each(function() {
// The two concepts for each page
// scroller = text scrolling area
// slider = full-screen page
//previous = the page before the current
// next = the page after the current

var scroller = $(this).find('.article-scroller');
var slider = $(this);
var previous = slider.prev();
var next = slider.next();

var slideOn = true;
if (slider.attr('id')=='overlayed'){ slideOn = false;
//console.log(slider.attr('id'))
};

scroller.css({'overflow': 'auto','position':'relative'});
/*
if (mobile) {
//console.log('touch only');
scroller.css({'overflow': 'hidden','position':'relative'});
} else {
//console.log('desk only');
scroller.css({'overflow': 'auto','position':'relative'});
}*/

var height = 0;
var cpos = scroller.scrollTop()
scroller.scro

First off, if you have lines of code that are commented out, you should probably either uncomment them, or remove them. Commented out code is an eyesore.

Secondly, some of your variable names are, not good. For example, I have no idea what the variable sX, sWX, or lpos do. Variable names should be not too long, but not too short, and be as descriptive as possible about the purpose of the variable.

A lot of your spacing is odd as well. For example, the block of code from your code below:

scrollbarH.css({  'display':'none',
                  'position':'absolute',
                  'height':'5px',
                  'width':scrollbarH_length+'px',
                                        'top':scroller.innerHeight()-7+'px',
                  'left':0,'background':'black',
                  'border':'1px white solid',
                  '-webkit-border-radius':'5px',
                  'opacity':'0.9'});

Would become the below block of code:

scrollbarH.css({  
    'display': 'none',
    'position': 'absolute',
    'height': '5px',
    'width': scrollbarH_length + 'px',
    'top': scroller.innerHeight() - 7 + 'px',
    'left': 0,
    'background': 'black',
    'border': '1px white solid',
    '-webkit-border-radius': '5px',
    'opacity': '0.9'
});

Generally, you should also have space between your operators. It usually makes expressions much easier to read as well.

Finally, I'd recommend finding a code style, and then writing in that style. I usually follow this style guide for how I write my Javascript code.

StackExchange Code Review Q#4745, answer score: 3