javascript - Scroll a div when focused on an internal div - Stack Overflow

admin管理员组

文章数量:1202004

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

In Chrome is ok In IE8+ is ok (i know a hack) In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)

Working fiddle -> /

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
  main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}

#wrapper {
  width: 100%;
  height: 1500px;
  border: 1px solid red;
  padding-top: 380px;
}
#wrapper .container {
  border: 1px solid green;
  width: 100%;
  height: 500px;
  overflow: scroll;
}
#wrapper .container-scroll {
  height: 1500px;
  width: 100%;
  border: 1px solid yellow;
  position: relative;
}
#wrapper .main {
  width: 200px;
  height: 500px;
  background: black;
  overflow: scroll;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -100px;
  margin-top: 10px;
}

<div id="wrapper">
  <div class="container">
    <div class="container-scroll">
      <div id="main-site" class="main">
        My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
      </div>
    </div>
  </div>
</div>

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

In Chrome is ok In IE8+ is ok (i know a hack) In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)

Working fiddle -> https://jsfiddle.net/8oj0sge4/6/

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
  main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}

#wrapper {
  width: 100%;
  height: 1500px;
  border: 1px solid red;
  padding-top: 380px;
}
#wrapper .container {
  border: 1px solid green;
  width: 100%;
  height: 500px;
  overflow: scroll;
}
#wrapper .container-scroll {
  height: 1500px;
  width: 100%;
  border: 1px solid yellow;
  position: relative;
}
#wrapper .main {
  width: 200px;
  height: 500px;
  background: black;
  overflow: scroll;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -100px;
  margin-top: 10px;
}

<div id="wrapper">
  <div class="container">
    <div class="container-scroll">
      <div id="main-site" class="main">
        My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
      </div>
    </div>
  </div>
</div>

Thank you guys.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 27, 2015 at 16:27 andrewgu 1,6421515 silver badges2323 bronze badges asked Apr 16, 2015 at 21:53 user4002542user4002542 4

• Don't you think its better if you place (main-site) inisde the (container) so you have the freedom to scroll inside (container-scroll) -- demo jsfiddle.net/17nbtg7q – Tasos Commented Apr 16, 2015 at 23:01
• In the fiddle it says when the mouse is hover this div in safari but I'm assuming it's about an adaptation for touch. If that is the case, see if this does the trick (or something similar, can't test myself) : jsfiddle.net/awLk2x8w. – Shikkediel Commented Apr 23, 2015 at 19:01
• If you want the whole page scroll even while hovering scrollable containers, how are users supposed to actually scroll inside the scrollable containers? – Hugo G Commented Apr 27, 2015 at 9:11
• Which OS are you testing Safari on? – Jamie Barker Commented Apr 27, 2015 at 10:27

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 6 +25

I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.

<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>

<script>
function loadpage()
{ document.getElementById('marquee1').stop();  }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>

</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"     onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This     is my test content This is my test content This is my test content This is my     test 

content This is my test content This is my test content This is my test     content This is my test content This is my test content This is my test content     This is my test content This is my test content This is my test content 
</marquee>
</body>
</html>

you just add this js file to get a smooth scrolling effect.

https://github.com/nathco/jQuery.scrollSpeed

live deomo

http://code.nath.co/scrollSpeed

Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.

.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

There is already an answer on scroll position: How to get scrollbar position with Javascript?

I don't know important is that content, and by this I mean if it needs to stay selectable.

If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.

Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.

The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.

One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.

In your case, you may do something like this:

main.parentNode.parentNode.onscroll = function(event) {
    debounce(offsetting, 10);
}

function offsetting() {
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";       
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}

If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.

Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

本文标签： javascriptScroll a div when focused on an internal divStack Overflow