2
私は単純なJavaScriptを使用しています。私はコンテナの高さと幅を変更します。 JavaScriptを修正する必要があると思うのは、高さがpxに設定されているコンテナで作業しているためですが、高さを％に設定しています。問題は、コンテナの下部にサイズを変更すると表示されます（完全なimgを見ることができないか、またはスペースがあまりにも大きすぎます）。高さ、スクロールバー付きコンテナを固定する方法
または多分私は間違っています...ヒント？
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>それがするように、あなたはおそらく、ピクセル単位での最大の高さまたは最大幅を設定する必要があります。：
[1]: http://codepen.io/psairidas/pen/RaVwzw
[2]: http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html
リンクを提供するだけでなく、ここにコードを掲載する必要があります。 [SOの最小限の例のガイド]（http://stackoverflow.com/help/mcve）に従ってください。 – chazsolo