Question

I have

<input type="text" readonly="readonly" style="width: 50px" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra ullamcorper tellus, in varius erat mollis in. Suspendisse condimentum turpis sit amet tortor bibendum cursus lobortis enim posuere." />

The text is longer than the input width and the only way to view this is it you select the text which is hidden.

Is there a way to detect the scroll of the mousewheel up/down and change the text-indent?

I dont want this to effect the ability to select the text, e.g I wanted to copy/paste a single word “Phasellus”.

Also be good if this worked for touch screen devices.

jsFiddle

1. It needs to only text-indent the text if its hidden (longer than the input width+padding+border)
2. Make it impossible to scroll too many and the text get completely hidden.

Answer 1

you can use jquery mousewheel event. you can use this plugin to get up and down of mouse wheel

$("input").on('mousewheel', function(event, delta) {
        var dir = delta > 0 ? 'Up' : 'Down',
            vel = Math.abs(delta);
        $(this).text(dir + ' at a velocity of ' + vel);
        return false;
 });