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

Question

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

Navigation

#1 by (4 votes)

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><scriptsrc="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 would like to know if there is any way for my div scroll to take the place of the default browser%% ...

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

javascript jquery rolamento jquery-ui

asked by anonymous 24.06.2015 / 06:52

1 answer

How can I convert snake_case to camelCase (and vice versa) in Python? How to authenticate a user in an android app that uses Facebook login

score 4 · Accepted Answer

You can use Range Input as a custom scrollbar

You can read more about this at: JQuery Tools Rangeinput (source code below)

Example in jsFiddle: link

// 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><scriptsrc="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" />