我试图让SimpleScrollbar滚动而不出框。这是我的HTML:
<!DOCTYPE html>
<head>
<script src="simple-scrollbar.min.js"></script>
<link rel="stylesheet" href="simple-scrollbar.css">
</head>
<body>
<div ss-container style="border: 1px solid purple; width: 150px; height: 300px; display: inline-block;">
<p style="padding: 5px 25px 5px 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
这是我的Javascript:
!function(t,e){"object"==typeof exports?module.exports=e(window,document):t.SimpleScrollbar=e(window,document)}(this,function(t,e){function s(t){Object.prototype.hasOwnProperty.call(t,"data-simple-scrollbar")||Object.defineProperty(t,"data-simple-scrollbar",{value:new o(t)})}function i(t,s){function i(t){var e=t.pageY-a;a=t.pageY,n(function(){s.el.scrollTop+=e/s.scrollRatio})}function r(){t.classList.remove("ss-grabbed"),e.body.classList.remove("ss-grabbed"),e.removeEventListener("mousemove",i),e.removeEventListener("mouseup",r)}var a;t.addEventListener("mousedown",function(s){return a=s.pageY,t.classList.add("ss-grabbed"),e.body.classList.add("ss-grabbed"),e.addEventListener("mousemove",i),e.addEventListener("mouseup",r),!1})}function r(t){for(this.target=t,this.direction=window.getComputedStyle(this.target).direction,this.bar='<div class="ss-scroll">',this.wrapper=e.createElement("div"),this.wrapper.setAttribute("class","ss-wrapper"),this.el=e.createElement("div"),this.el.setAttribute("class","ss-content"),"rtl"===this.direction&&this.el.classList.add("rtl"),this.wrapper.appendChild(this.el);this.target.firstChild;)this.el.appendChild(this.target.firstChild);this.target.appendChild(this.wrapper),this.target.insertAdjacentHTML("beforeend",this.bar),this.bar=this.target.lastChild,i(this.bar,this),this.moveBar(),this.el.addEventListener("scroll",this.moveBar.bind(this)),this.el.addEventListener("mouseenter",this.moveBar.bind(this)),this.target.classList.add("ss-container");var s=window.getComputedStyle(t);"0px"===s.height&&"0px"!==s["max-height"]&&(t.style.height=s["max-height"])}function a(){for(var t=e.querySelectorAll("*[ss-container]"),i=0;i<t.length;i++)s(t[i])}var n=t.requestAnimationFrame||t.setImmediate||function(t){return setTimeout(t,0)};r.prototype={moveBar:function(t){var e=this.el.scrollHeight,s=this.el.clientHeight,i=this;this.scrollRatio=s/e;var r="rtl"===i.direction,a=r?i.target.clientWidth-i.bar.clientWidth+18:-1*(i.target.clientWidth-i.bar.clientWidth);n(function(){i.scrollRatio>=1?i.bar.classList.add("ss-hidden"):(i.bar.classList.remove("ss-hidden"),i.bar.style.cssText="height:"+Math.max(100*i.scrollRatio,10)+"%; top:"+i.el.scrollTop/e*100+"%;right:"+a+"px;")})}},e.addEventListener("DOMContentLoaded",a),r.initEl=s,r.initAll=a;var o=r;return o});
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
box-sizing: border-box;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: black;
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
opacity: 1;
transition: opacity 0.25s linear;
}
.ss-hidden {
}
.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll {
opacity: 1;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
这是我的文件
请帮我让滚动条在上下滚动时不要脱离盒子。
"爱"是一种"爱"，是一种"爱"，是一种"爱"，是一种"爱"。但是，敌人和最低限度的风险，是一种不寻常的实践，而不是一种共同的结果。在淫荡的浮躁中，你会发现你的灵魂是纯洁的，你的灵魂是纯洁的，你的灵魂是纯洁的。除特殊情况下的职业过失外，其他情况下的公务过失均属于违法行为。
谢谢。
Neo
对于我的答案，你应该使用
overflow: hidden;
在正确的位置(或元素)。
希望有帮助