Question

我正在尝试将进度滚动条的以下示例设为垂直：

http://flowplayer.org/tools/demos/rangeinput/scrollbar.html

我已经尝试了很多年，似乎无法找到方法。我是jquery的新手，所以任何帮助都会非常感激。

Answer 1

你为jquery尝试过这个插件吗？ jquery-progressbarvertical 看来这就是你想要的东西。或者您可以查看available plugins的jquery插件站点本身。

Answer 2

评论更新版本：

http://jsfiddle.net/SKfGQ/5/

它有效，但它大量捏造。

~~就像反转所有width和height相关属性一样简单。~~

因此，在JavaScript中，将left更改为top。

在CSS中，有水平属性和垂直属性，请切换它们。

我从这里获取了代码：http://flowplayer.org/tools/demos/rangeinput/scrollbar.htm

这就是结果：http://jsfiddle.net/HGUzW/

唯一的新CSS位于顶部：

#scrollwrap, .slider { float: left } .slider { margin-left: 50px }

<击>

Answer 3

＆＃13;

var heightProgress = $('.progress_bar_bg').height();
	var positionofStart = $('.progress_section').position().top
	$(window).on('scroll',function(){
	 if($(window).scrollTop() >= $('.progress_section').position().top - $(window).height()) {
			var scrolled = $(document).scrollTop() + $(window).height() ;
var tabminus = (scrolled - positionofStart) ;
var value = (tabminus / heightProgress) * 100;
			$('.progress').css('height', ''+value+'%')

		}
	})

＆＃13;

.dummy{
	height: 1200px;
}
.progress_bar_bg{
	width: 2px;
	height: 2000px;
	background-color: grey;
	text-align: center;
	margin: 0 auto;
	position: relative;
}
.progress{
	width: 100%;
	position: absolute;
	height: 20px;
	background-color: red;
	max-height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div class="dummy">
		
	</div>
	<div class="progress_section">
		<div class="progress_bar_bg">
			<div class="progress"></div>
		</div>
	</div>
	<div class="dummy">
		
	</div>
	
</body>

＆＃13;

垂直进度滚动条

3 个答案: