标签：jQuery bar thumb 自定义 outerHeight 滚动条 true scroll view

依赖插件
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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。