// je code à l'arrache dans la réponse rapide donc bon ...

var x, y, currentX, currentY,

     div = document.getMachinById('qzdqzdqzd'),

     timer



function onDown(evt) {

 x = evt.clientX, y = evt.clientY,

 currentX = currentScrollLeft(div), currentY = currentScrollTop(div)

timer = timerLoop()

}





function onUp(evt) {

    clearTimeout(timer)

}



function timerLoop() {

    timer = setTimeout(function(){

       // ici on check le déplacement

      var newX = getMouseX(),

            newY = getMouseY(),

      var moveX = newX - x,

            moveY = newY - y,

            x = newX,

            y = newY,

            currentX += moveX, 

            currentY += moveY, 

      setScrollLeft(currentX)

      setScrollTop(currentY)

      timerLoop()

    },1)

}



// alors là chuis pas du tout sur pour la syntaxe, je le fais en mode hideux, 

// il faut bien entendu utiliser les event listeners hein !

// PS: c'est quoi ces "strong" moisis qui se rajoutent dessous ?

div.onmousedown = onDown, div.onmouseup = onUp 

<div style="height:400px;width:400px;overflowcroll;" draggable="true" id="qzdqzdqzd">

	<div style="height:900px; width:40px;">

		<a href="http://127.0.0.1/">un lien</a>

	</div>

	<span style="width:800px;display:inline-block;">Une span</span>

	<a href="http://127.0.0.1/">un autre lien</a>

</div>

<script>

	var div = document.getElementById('qzdqzdqzd');

	div.style.border = '1px solid red';

	

	var startX, startY, scrollX, scrollY;

	function startDrag(evt) {

		console.log('dragStart', evt);

		startX = evt.clientX;

		startY = evt.clientY;

		scrollX = div.scrollLeft;

		scrollY = div.scrollTop;

		if (!evt.dataTransfer.getData('text/plain')) {	// No drag drop if data already set (user is drag and dropping a DOM item)

			evt.dataTransfer.setData('text/x-coords', '<<NoData>>');

			evt.dataTransfer.setDragImage(document.createElement('img'), 0, 0);

		}

	}

	

	function moveDrag(evt) {

		evt.preventDefault();

		if (evt.dataTransfer.getData('text/x-coords')) {

			div.scrollTop = scrollY + evt.clientY - startY;

			div.scrollLeft = scrollX + evt.clientX - startX;

			return true;

		}

		return false;

	}

	

	var dragOk = false;

	function stopDrag(evt) {

		console.log('dragStop', evt);

		evt.preventDefault();

		dragOk = true;

		console.log(evt.dataTransfer);

		var matches = evt.dataTransfer.getData('text/plain').match(/^(\d+);(\d+)$/);	// ie: 50;50

		if (matches) {

			div.scrollTop = parseInt(matches[0]);

			div.scrollLeft = parseInt(matches[1]);

			return false;

		}

		else if (evt.dataTransfer.getData('text/plain+x-coords')) {

			moveDrag();

		}

		return false;

	}

	

	function dragEnd(evt) {

		if (!dragOk) {

			div.scrollLeft = scrollX;

			div.scrollTop = scrollY;

		}

		dragOk = false;

	}

	

	div.addEventListener('dragstart', startDrag);

	div.addEventListener('dragover', moveDrag);

	div.addEventListener('drop', stopDrag);

	div.addEventListener('dragend', dragEnd);

</script>

Citation :parce que les mousedown/up/mouse, sur tactile c'est risqué, et tu risques d'avoir des emmerdes type <a> non cliquables à la souris, textes non sélectionnables à la souris, etc. Si je trouve, je vous dis.

niahoo a écrit :HMm le feeling est pas terrible, je préfère le feeling comme sur google maps (c'est à dire que tu inverse les directions de scroll pas rapport à celle de la souris)