Issues with very basic scrollbar not acting as expected

时间：2017-04-10 01:32:43

标签： javascript jquery html css

I'm attempting to make a div that moves up and down the page depending on how much has been scrolled. I use scrollTop to return the top value of the browser's scrollbar, and set my div to that position. However, I'm getting some funny results, and my div is jumping all around the page when I scroll. Can anyone help me figure out why?

HTML

<body id="body">
    <div id="scrollBar"></div>
</body>

Javascript

$(window).mousewheel(function(turn, delta) {

  if (delta == 1) // going down

    document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

  else //going up

  document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

});

CSS

#scrollBar {
    position:relative;
    right:0px;
    width: 5px;
    height:30px;
    background-color:red;
    z-index:2000;
}

Thanks

2 个答案:

答案 0 :(得分：0)

To get what you're trying to do:

First you need to calculate the scrollbar's height. You could do this by using:

window.innerHeight * (window.innerHeight / document.body.offsetHeight)

Then use $.scroll() and put your logic inside it:

$(document).ready(function(){
    var brwserSBHeight =  window.innerHeight * (window.innerHeight / document.body.offsetHeight) +"px"
    document.getElementById("scrollBar").style.height = brwserSBHeight ; 

    $(window).on('scroll',function(e){
        document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";
       document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";

})

And, change the position:fixed in css:

Demo

答案 1 :(得分：0)

I came up with some thing similar, but with absolute positioning:

var scrollBar = $('#scrollBar');
var jqWindow = $(window);
var jqDocument = $(document);

jqWindow.on('scroll resize load', function(e){
  var windowHeight = jqWindow.height();
  var pageHeight = jqDocument.height();
  
  if(pageHeight === 0 || pageHeight - windowHeight === 0){
    return;
  }
  
  var scroll = jqWindow.scrollTop();
  var notVisiblePageScrollRatio = scroll / (pageHeight - windowHeight);
  
  var scrollBarHeight = windowHeight * (windowHeight / pageHeight);
  var scrollBarPosition = (pageHeight - scrollBarHeight) * notVisiblePageScrollRatio;
  scrollBar.height(scrollBarHeight);
  scrollBar.css('top', scrollBarPosition);
});
html, body {
  margin: 0;
}

#scrollBar {
  position: absolute;
  top: 0; /*calculated by js*/
  right: 100px;
  width: 30px;
  height: 0; /*calculated by js*/
  background: #000;
}

#scrollBar:before {
  content: ' ';
  display: block;
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  top: 0;
  background: #FF0;
}

#scrollBar:after {
  content: ' ';
  display: block;
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FF0;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="scrollBar"></div>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
  </body>
</html>

I was also thinking about checking for pageHeight be less than window height so you can hide you'r scrollbar when it is not needed, but I had some troubles with resize event not firing up past certain window height, so it was clunky and last reported heights of window and page were different one or two, when at the end they were at least equal, I was checking it by setting interval that was reporting those heights. So I don't include that functionality here, but I think it is something that may come handy.

相关问题
最新问题