jQuery a+Scroll 自定义滚动条代码

依赖插件
jquery.min.js
jquery.mousewheel.min.js
jquery.resize.min.js

<div class="a-scroll-container">
	<div class="a-scroll-wrapper">
		<div class="a-scroll-view">
			在这里插入内容
		</div>
	</div>
</div>

.a-scroll-container {
	position: relative;
}
.a-scroll-wrapper::before,
.a-scroll-wrapper::after {
	content: ' ';
	display: table;
}
.a-scroll-wrapper::after{
	clear: both;
}
.a-scroll-view {
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.a-scroll-drag .a-scroll-view {
	-webkit-transition: none;
	transition: none;
}
.a-scroll-bar {
	position: absolute;
	right: 2px;
	bottom: 2px;
	border-radius: 4px;
	-webkit-transition: all .12s ease-out;
	transition: all .12s ease-out;
	opacity: 0;
	z-index: 1;
}
.a-scroll-bar.a-scroll-vertical {
	width: 6px;
	top: 2px;
}
.a-scroll-container:hover .a-scroll-bar {
	opacity: 1;
}
.a-scroll-bar-thumb {
	display: block;
	position: relative;
	width: 0;
	height: 0;
	background-color: rgba(144, 147, 153, .3);
	border-radius: inherit;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
.a-scroll-bar.a-scroll-vertical .a-scroll-bar-thumb {
	width: 100%;
}
.a-scroll-bar-thumb:hover,
.a-scroll-bar-thumb:active {
	background-color: rgba(144, 147, 153, .5);
}
.a-scroll-drag .a-scroll-bar-thumb {
	-webkit-transition: none;
	transition: none;
}

jQuery.extend({
	aScroll: function() {
        $('.a-scroll-container').each(function() {
            var _this = $(this);

    		if (_this.attr('data-start') == undefined) {
    			_this.attr('data-start', 'true');
    
    			if (_this.find('.a-scroll-vertical').length == 0) {
    				_this.append('\
    					<div class="a-scroll-bar a-scroll-vertical">\
    						<div class="a-scroll-bar-thumb"></div>\
    					</div>\
    				');
    			}
    		}
    
    		var _wrapper = _this.find('.a-scroll-wrapper'),
    			_view = _this.find('.a-scroll-view'),
    			_scroll = _this.find('.a-scroll-bar'),
    			_thumb = _scroll.find('.a-scroll-bar-thumb');
    
    		_view.on('resize', function () {
    			aScrollInit();
    		})
    
            $(window).resize(function() {
                aScrollInit();
            });
    
    		aScrollInit();
    
    		function aScrollInit () {
    			_wrapper.off('mousewheel');
    			_scroll.off('mousedown touchstart');
    			_thumb.off('mousedown touchstart');
    			$(document).off('mousemove touchmove');
    			$(document).off('mouseup touchend');
    
    			_thumb.removeAttr('style');
    			_view.removeAttr('style');
    
    			if (_view.outerHeight(true) > _wrapper.outerHeight(true)) {
    				var isDrag = false,
    					rate = _this.outerHeight(true) / _view.outerHeight(true),
    					wheel = -(_view.position().top),
    					pageY = 0,
    					viewT = 0,
    					barT = 0,
    					barH = Math.round(rate *  _scroll.outerHeight(true)),
    					wheelMax = _view.outerHeight(true) - _wrapper.outerHeight(true),
    					barMax = _scroll.outerHeight(true) - barH;
    
    				_thumb.css('height', barH + 'px');
    
    				_wrapper.on('mousewheel', function (event, direction) {
    					if (isDrag == false) {
    						if (direction > 0) {
    							wheel -= 25;
    						} else if (direction < 0) {
    							wheel += 25;
    						}
    
    						wheel = wheel < 0 ? 0 : (wheel > wheelMax ? wheelMax : wheel);
    
    						_view.css('transform', 'translateY(' + -wheel + 'px)');
    						_thumb.css('transform', 'translateY(' + Math.round(wheel / _view.outerHeight(true) * _scroll.outerHeight(true)) + 'px)');
    					}
    				})
    				_scroll.on('mousedown touchstart', function (event) {
    					var scrollT = $(this).offset().top,
    						b = event.pageY - scrollT - (barH / 2),
    						w = _view.outerHeight(true) * (b / _scroll.outerHeight(true));
    
    					b = b < 0 ? 0 : (b > barMax ? barMax : b);
    					w = w < 0 ? 0 : (w > wheelMax ? wheelMax : w);
    
    					wheel =  w;
    
    					_thumb.css('transform', 'translateY(' + b + 'px)');
    					_view.css('transform', 'translateY(' + -w + 'px)');
    
    					return false;
    				})
    				_thumb.on('mousedown touchstart', function (event) {
    					isDrag = true
    					barT = _thumb.position().top;
    					viewT = _view.position().top;
    					pageY = event.pageY;
    
    					_this.addClass('a-scroll-drag');
    
    					return false;
    				})
    				$(document).on('mousemove touchmove', function (event) {
    					if (isDrag) {
    						var r = event.pageY - pageY,
    							w = -viewT + (_view.outerHeight(true) * (r / _scroll.outerHeight(true))),
    							b = barT + r;
    
    						w = w < 0 ? 0 : (w > wheelMax ? wheelMax : w);
    						b = b < 0 ? 0 : (b > barMax ? barMax : b);
    
    						wheel =  w;
    
    						_view.css('transform', 'translateY(' + -w + 'px)');
    						_thumb.css('transform', 'translateY(' + b + 'px)');
    					}
    				})
    				$(document).on('mouseup touchend', function (event) {
    					isDrag = false;
    
    					_this.removeClass('a-scroll-drag');
    				})
    			}
    		}
        })
	}
})

标签：jQuery,bar,thumb,自定义,outerHeight,滚动条,true,scroll,view
来源： https://blog.csdn.net/a1141727/article/details/112488073