2
fixieren Ich benutze ein einfaches JavaScript. Ich ändere die Höhe und Breite des Containers. Ich denke, ich muss das JavaScript reparieren, weil es an dem Container arbeitet, der als Höhe in px eingestellt ist, aber ich habe die Höhe als% festgelegt. Das Problem tritt auf, wenn Sie die Größe ändern (Sie können keine vollständige IMG sehen oder es ist zu viel Platz) am unteren Rand des Containers.Wie kann ich Höhe, Container mit Bildlaufleiste
Oder vielleicht liege ich falsch ... Irgendwelche Tipps?
function jsScroller (o, w, h) {
\t var self = this;
\t var list = o.getElementsByTagName("div");
\t for (var i = 0; i < list.length; i++) {
\t \t if (list[i].className.indexOf("Scroller-Container") > -1) {
\t \t \t o = list[i];
\t \t }
\t }
\t
\t //Private methods
\t this._setPos = function (x, y) {
\t \t if (x < this.viewableWidth - this.totalWidth)
\t \t \t x = this.viewableWidth - this.totalWidth;
\t \t if (x > 0) x = 0;
\t \t if (y < this.viewableHeight - this.totalHeight)
\t \t \t y = this.viewableHeight - this.totalHeight;
\t \t if (y > 0) y = 0;
\t \t this._x = x;
\t \t this._y = y;
\t \t with (o.style) {
\t \t \t left = this._x +"px";
\t \t \t top = this._y +"px";
\t \t }
\t };
\t
\t //Public Methods
\t this.reset = function() {
\t \t this.content = o;
\t \t this.totalHeight = o.offsetHeight;
\t \t this.totalWidth \t = o.offsetWidth;
\t \t this._x = 0;
\t \t this._y = 0;
\t \t with (o.style) {
\t \t \t left = "0px";
\t \t \t top = "0px";
\t \t }
\t };
\t this.scrollBy = function (x, y) {
\t \t this._setPos(this._x + x, this._y + y);
\t };
\t this.scrollTo = function (x, y) {
\t \t this._setPos(-x, -y);
\t };
\t this.stopScroll = function() {
\t \t if (this.scrollTimer) window.clearInterval(this.scrollTimer);
\t };
\t this.startScroll = function (x, y) {
\t \t this.stopScroll();
\t \t this.scrollTimer = window.setInterval(
\t \t \t function(){ self.scrollBy(x, y); }, 40
\t \t);
\t };
\t this.swapContent = function (c, w, h) {
\t \t o = c;
\t \t var list = o.getElementsByTagName("div");
\t \t for (var i = 0; i < list.length; i++) {
\t \t \t if (list[i].className.indexOf("Scroller-Container") > -1) {
\t \t \t \t o = list[i];
\t \t \t }
\t \t }
\t \t if (w) this.viewableWidth = w;
\t \t if (h) this.viewableHeight = h;
\t \t this.reset();
\t };
\t
\t //variables
\t this.content = o;
\t this.viewableWidth = w;
\t this.viewableHeight = h;
\t this.totalWidth \t = o.offsetWidth;
\t this.totalHeight = o.offsetHeight;
\t this.scrollTimer = null;
\t this.reset();
};
function jsScrollbar (o, s, a, ev) {
\t var self = this;
\t
\t this.reset = function() {
\t \t //Arguments that were passed
\t \t this._parent = o;
\t \t this._src = s;
\t \t this.auto = a ? a : false;
\t \t this.eventHandler = ev ? ev : function() {};
\t \t //Component Objects
\t \t this._up = this._findComponent("Scrollbar-Up", this._parent);
\t \t this._down = this._findComponent("Scrollbar-Down", this._parent);
\t \t this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
\t \t this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
\t \t //Height and position properties
\t \t this._trackTop = findOffsetTop(this._yTrack);
\t \t this._trackHeight = this._yTrack.offsetHeight;
\t \t this._handleHeight = this._yHandle.offsetHeight;
\t \t this._x = 0;
\t \t this._y = 0;
\t \t //Misc. variables
\t \t this._scrollDist = 5;
\t \t this._scrollTimer = null;
\t \t this._selectFunc = null;
\t \t this._grabPoint = null;
\t \t this._tempTarget = null;
\t \t this._tempDistX = 0;
\t \t this._tempDistY = 0;
\t \t this._disabled = false;
\t \t this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
\t \t
\t \t this._yHandle.ondragstart = function() {return false;};
\t \t this._yHandle.onmousedown = function() {return false;};
\t \t this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
\t \t this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
\t \t this._addEvent(this._parent, "mousedown", this._scrollbarClick);
\t \t
\t \t this._src.reset();
\t \t with (this._yHandle.style) {
\t \t \t top = "0px";
\t \t \t left = "0px";
\t \t }
\t \t this._moveContent();
\t \t
\t \t if (this._src.totalHeight < this._src.viewableHeight) {
\t \t \t this._disabled = true;
\t \t \t this._yHandle.style.visibility = "hidden";
\t \t \t if (this.auto) this._parent.style.visibility = "hidden";
\t \t } else {
\t \t \t this._disabled = false;
\t \t \t this._yHandle.style.visibility = "visible";
\t \t \t this._parent.style.visibility = "visible";
\t \t }
\t };
\t this._addEvent = function (o, t, f) {
\t \t if (o.addEventListener) o.addEventListener(t, f, false);
\t \t else if (o.attachEvent) o.attachEvent('on'+ t, f);
\t \t else o['on'+ t] = f;
\t };
\t this._removeEvent = function (o, t, f) {
\t \t if (o.removeEventListener) o.removeEventListener(t, f, false);
\t \t else if (o.detachEvent) o.detachEvent('on'+ t, f);
\t \t else o['on'+ t] = null;
\t };
\t this._findComponent = function (c, o) {
\t \t var kids = o.childNodes;
\t \t for (var i = 0; i < kids.length; i++) {
\t \t \t if (kids[i].className && kids[i].className == c) {
\t \t \t \t return kids[i];
\t \t \t }
\t \t }
\t };
\t //Thank you, Quirksmode
\t function findOffsetTop (o) {
\t \t var t = 0;
\t \t if (o.offsetParent) {
\t \t \t while (o.offsetParent) {
\t \t \t \t t += o.offsetTop;
\t \t \t \t o = o.offsetParent;
\t \t \t }
\t \t }
\t \t return t;
\t };
\t this._scrollbarClick = function (e) {
\t \t if (self._disabled) return false;
\t \t
\t \t e = e ? e : event;
\t \t if (!e.target) e.target = e.srcElement;
\t \t
\t \t if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
\t \t else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
\t \t else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
\t \t else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
\t \t
\t \t self._tempTarget = e.target;
\t \t self._selectFunc = document.onselectstart;
\t \t document.onselectstart = function() {return false;};
\t \t
\t \t self.eventHandler(e.target, "mousedown");
\t \t self._addEvent(document, "mouseup", self._stopScroll, false);
\t \t
\t \t return false;
\t };
\t this._scrollbarDrag = function (e) {
\t \t e = e ? e : event;
\t \t var t = parseInt(self._yHandle.style.top);
\t \t var v = e.clientY + document.body.scrollTop - self._trackTop;
\t \t with (self._yHandle.style) {
\t \t \t if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
\t \t \t \t top = self._trackHeight - self._handleHeight +"px";
\t \t \t else if (v <= self._grabPoint) top = "0px";
\t \t \t else top = v - self._grabPoint +"px";
\t \t \t self._y = parseInt(top);
\t \t }
\t \t
\t \t self._moveContent();
\t };
\t this._scrollbarWheel = function (e) {
\t \t e = e ? e : event;
\t \t var dir = 0;
\t \t if (e.wheelDelta >= 120) dir = -1;
\t \t if (e.wheelDelta <= -120) dir = 1;
\t \t
\t \t self.scrollBy(0, dir * 20);
\t \t e.returnValue = false;
\t };
\t this._startScroll = function (x, y) {
\t \t this._tempDistX = x;
\t \t this._tempDistY = y;
\t \t this._scrollTimer = window.setInterval(function() {
\t \t \t self.scrollBy(self._tempDistX, self._tempDistY);
\t \t }, 40);
\t };
\t this._stopScroll = function() {
\t \t self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
\t \t self._removeEvent(document, "mouseup", self._stopScroll, false);
\t \t
\t \t if (self._selectFunc) document.onselectstart = self._selectFunc;
\t \t else document.onselectstart = function() { return true; };
\t \t
\t \t if (self._scrollTimer) window.clearInterval(self._scrollTimer);
\t \t self.eventHandler (self._tempTarget, "mouseup");
\t };
\t this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
\t this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
\t this._scrollTrack = function (e) {
\t \t var curY = e.clientY + document.body.scrollTop;
\t \t this._scroll(0, curY - this._trackTop - this._handleHeight/2);
\t };
\t this._scrollHandle = function (e) {
\t \t var curY = e.clientY + document.body.scrollTop;
\t \t this._grabPoint = curY - findOffsetTop(this._yHandle);
\t \t this._addEvent(document, "mousemove", this._scrollbarDrag, false);
\t };
\t this._scroll = function (x, y) {
\t \t if (y > this._trackHeight - this._handleHeight)
\t \t \t y = this._trackHeight - this._handleHeight;
\t \t if (y < 0) y = 0;
\t \t
\t \t this._yHandle.style.top = y +"px";
\t \t this._y = y;
\t \t
\t \t this._moveContent();
\t };
\t this._moveContent = function() {
\t \t this._src.scrollTo(0, Math.round(this._y * this._ratio));
\t };
\t
\t this.scrollBy = function (x, y) {
\t \t this._scroll(0, (-this._src._y + y)/this._ratio);
\t };
\t this.scrollTo = function (x, y) {
\t \t this._scroll(0, y/this._ratio);
\t };
\t this.swapContent = function (o, w, h) {
\t \t this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
\t \t this._src.swapContent(o, w, h);
\t \t this.reset();
\t };
\t
\t this.reset();
};#no-template-pager {
width: 34%;
height: 25vw;
overflow: hidden;
white-space: nowrap;
float: left;
}
.Scroller-Container {
position: relative;
width: 100%;
height: 100%;
}
#Scrollbar-Container {
position: relative;
top: 0px;
left: 0%;
background: green;
width: 1%;
height: 100%;
overflow: hidden;
}
.Scrollbar-Track {
width: 100%;
height: 100%;
position: absolute;
background: #222;
}
.Scrollbar-Handle {
position: absolute;
width: 100%;
height: 70%;
background: #8E8E8E;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.Scrollbar-Handle:hover, .Scrollbar-Handle:active {
background: #fff;
}
#slider2 {
margin: 50px auto;
width: 60%;
height: 25vw;
background: #222;
}
#youtube {
width: 65%;
height: 25vw;
float: right;
background: blue;
}
.thumbs {
width: 100%;
height: 25%;
box-shadow: 0 -1px 0 #5A5A5A,
0 -1px 0 #707070;
}
.thumbs img {
margin: 3% 4%;
width: 80%;
height: 80%;
float: left;
}<section id="slider2">
<div id="youtube">
</div>
<div id="no-template-pager" class="cycle-pager external">
<div class="Scroller-Container">
<!-- using thumbnail image files would be even better! -->
<div class="thumbs">
<img src="http://img.youtube.com/vi/Je7VuV9yHIw/mqdefault.jpg">
</div>
<div class="thumbs">
<img src="http://img.youtube.com/vi/uxps_fYUeJk/mqdefault.jpg">
</div>
<div class="thumbs">
<img src="http://img.youtube.com/vi/Zvr3cwbbqHU/mqdefault.jpg">
</div>
<div class="thumbs">
<img src="http://img.youtube.com/vi/Ka9xtXPD3BA/mqdefault.jpg">
</div>
<div class="thumbs">
<img src="http://img.youtube.com/vi/U8HVQXkeU8U/mqdefault.jpg">
</div>
<div class="thumbs">
<img src="http://img.youtube.com/vi/e7_UUfokexM/mqdefault.jpg">
</div>
</div>
</div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
</section>
<script>
var scroller = null;
var scrollbar = null;
window.onload = function() {
scroller = new jsScroller(document.getElementById("no-template-pager"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true);
}
</script>Link zu CodePen 1. und Javascript 2 .:
[1]: http://codepen.io/psairidas/pen/RaVwzw
[2]: http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html
Sie sollten Ihren Code hier posten, nicht nur Links bereitstellen. Folgen Sie [SO's minimaler Beispielleitfaden] (http://stackoverflow.com/help/mcve). – chazsolo