Nehmen wir an, ich habe eine white-space: nowrap; div mit overflow: hidden;. Sein Inhalt ist natürlich viel länger als das div ist und muss gescrollt werden, um enthüllt zu werden.Horizontales Scrollen eines Div mit der Maus und berühren
Ich habe this Bibliothek verwendet, aber es funktioniert nicht für mobile Geräte mit Touch-Eingabe. Kennen Sie Alternativen oder Möglichkeiten zur Implementierung dieser Funktion?
Machen Sie einen Container div mit overflow-y: hidden;overflow-x: scroll; und stellen Sie ihn auf die von Ihnen gewünschte Höhe ein.
Dann haben Sie Ihre innere div, die den Inhalt auf position:absolute; gesetzt und setzen Sie ihre Breite auf die Größe, die Sie Ihren Inhalt aufnehmen müssen.
Der Inhalt wird mit der Maus und per Berührung scrollen.
Klingt so, als ob Sie einen Sidecroller im Netflix-Stil verwenden würden - schauen Sie sich diesen Codepen an, den ich gemacht habe, was zeigt, worüber ich gerade sprach.
Nope. Inhalt scrollt nur mit einer Leiste. –
Vielleicht habe ich die ursprüngliche Frage falsch verstanden. Meinst du, dass der Inhalt überhaupt nicht gescrollt werden soll, bis er berührt oder übermoged wird? – HisPowerLevelIsOver9000
Nein, ich möchte, dass der Inhalt mit der Maus/Berührung gescrollt werden kann, aber ohne dass eine Bildlaufleiste sichtbar ist. –
Schließlich ist mein Wunsch erfüllt. Hier habe ich dragscroll.js Bibliothek geändert, um Touch-Unterstützung zu ermöglichen.
/* Modified dragscroll.js by Undust4able */
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports !== 'undefined') {
factory(exports);
} else {
factory((root.dragscroll = {}));
}
}(this, function (exports) {
var _window = window;
var _document = document;
\t
var mousemove = 'mousemove';
var mouseup = 'mouseup';
var mousedown = 'mousedown';
\t
\t var touchmove = 'touchmove';
var touchup = 'touchend';
var touchdown = 'touchstart';
\t
var EventListener = 'EventListener';
var addEventListener = 'add'+EventListener;
var removeEventListener = 'remove'+EventListener;
var dragged = [];
var reset = function(i, el) {
for (i = 0; i < dragged.length;) {
el = dragged[i++];
el = el.container || el;
el[removeEventListener](mousedown, el.md, 0);
_window[removeEventListener](mouseup, el.mu, 0);
_window[removeEventListener](mousemove, el.mm, 0);
\t \t \t
\t \t \t el[removeEventListener](touchdown, el.td, 0);
_window[removeEventListener](touchup, el.tu, 0);
_window[removeEventListener](touchmove, el.tm, 0);
}
// cloning into array since HTMLCollection is updated dynamically
dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
for (i = 0; i < dragged.length;) {
(function(el, lastClientX, lastClientY, pushed, scroller, cont){
(cont = el.container || el)[addEventListener](
mousedown,
cont.md = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
lastClientX = e.clientX;
lastClientY = e.clientY;
e.preventDefault();
}
}, 0
);
\t \t \t \t (cont = el.container || el)[addEventListener](
touchdown,
cont.td = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
e.preventDefault();
\t \t \t \t \t \t \t e = e.targetTouches[0];
lastClientX = e.clientX;
lastClientY = e.clientY;
}
}, 0
);
_window[addEventListener](
mouseup, cont.mu = function() {pushed = 0;}, 0
);
\t \t \t \t _window[addEventListener](
touchup, cont.tu = function() {pushed = 0;}, 0
);
_window[addEventListener](
mousemove,
cont.mm = function(e) {
if (pushed) {
(scroller = el.scroller||el).scrollLeft -=
(- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
(- lastClientY + (lastClientY=e.clientY));
}
}, 0
);
\t \t \t \t _window[addEventListener](
touchmove,
cont.tm = function(e) {
if (pushed) {
\t \t \t \t \t \t \t e = e.targetTouches[0];
(scroller = el.scroller||el).scrollLeft -=
(- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
(- lastClientY + (lastClientY=e.clientY));
}
\t \t \t \t \t \t
}, 0
);
})(dragged[i++]);
}
}
if (_document.readyState == 'complete') {
reset();
} else {
_window[addEventListener]('load', reset, 0);
}
exports.reset = reset;
}));
einen Blick auf hammer.js Take - http://hammerjs.github.io/ – AleshaOleg