Is there any way for a div to assume the role of the scroll?

Asked

Viewed 105 times

4

I have the following code:

$("#scroll").draggable({ axis: "x", scroll: true, containment: "#area" });
.area{
	position: absolute;
	width: 1010px;
	height: 100px;
	margin-top:10px;
	margin-left:10px;
	overflow-x: auto;
	overflow-y: hidden;
	
	border: 1px rgb(89,89,89) solid;
	
}

.scroll{
	position: absolute;
	margin-top:10px;
	margin-left:10px;
	
	width: 35px;
	height: 110px;
	
	border: 4px rgb(161, 233, 240) solid;
	
	background-position: bottom center;
	background-size: 35px 30px;
	background-repeat: no-repeat;
	border-radius: 20px;
	
	-moz-box-shadow:  0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
	-webkit-box-shadow:  0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
	box-shadow:  0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="area" class="area">testeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
<div id="scroll" class="scroll draggable"></div>

I wonder if there is any form of mine div scroll take the place of scroll browser pattern...

And more, every time I select div scroll for the first time, she gives a "jump" of about 10 pixels to the side and does not return to the original position.... I wanted to correct this problem....

javascript jquery jquery-ui rolling

  • If you’re looking to style the bar scroll, I think you should take a look in this question and consider using one of those options because what you’re trying to do here doesn’t seem like a very good idea :P

  • Yeah, I’ve already looked at your answer, but unfortunately, it doesn’t solve my problem, I really need to use a div as scroll :(

1 answer

4


You can use the Range Input as a custom scrollbar

You can read more about this on: Jquery Tools Rangeinput (source of the code below)

Example in jsFiddle: http://jsfiddle.net/qw75wgeg

// get handle to the scrollable DIV
var scroll = $("#scroll");
 
// initialize rangeinput
$(":range").rangeinput({
 
	// slide the DIV along with the range using jQuery's css() method
	onSlide: function(ev, step)  {
		scroll.css({left: -step});
	},
 
	// display progressbar
	progress: true,
 
	// initial value. also sets the DIV's initial scroll position
	value: 100,
 
	// this is called when the slider is clicked. we animate the DIV
	change: function(e, i) {
		scroll.animate({left: -i}, "fast");
	},
 
	// disable drag handle animation when when slider is clicked
	speed: 0
 
});
/* outermost element for the scroller (stays still) */
#scrollwrap {
    position:relative;
    overflow:hidden;
    width: 100%;
    height:150px;
    border:1px solid #000;
    margin-bottom:15px;
    -moz-box-shadow:0 0 20px #666;
    -webkit-box-shadow:0 0 20px #666;
}

/* the element that moves forward/backward */
#scroll {
    position:relative;
    width:20000em;
    padding:20px 100px;
    font:bold 90px  sans-serif;
    height:150px;
    background-color: #4679BD;
    color:#fff;
    text-shadow:5px 1px 1px #000;
    left:-100px;
}

.slider {
    position:relative;
    cursor:pointer;
    height:1px;
    border:2px solid #00118E;
    width:98%;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}

.progress {
    background-color:#00118E;
    height:3px;
    position:absolute;
    width:0;
}

.handle {
    border: 4px rgb(161, 233, 240) solid;
    box-shadow: 0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
    background-color:#fff;
    height:20px;
    width:80px;
    position:absolute;
    top:-12px;
    display:block;
    cursor:move;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
}

.handle:active {
    background-color: #4679BD;
}

.range {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<!-- our scrollable element -->
<div id="scrollwrap">
  <div id="scroll">
    jQuery TOOLS 1.2.6  Rangeinput. HTML5 ranges for humans.
  </div>
</div>
 
<!-- rangeinput that controls the scroll -->
<input type="range" max="2600" step="10" />

Browser other questions tagged javascript jquery jquery-ui rolling

You are not signed in. Login or sign up in order to post.