Question

我需要创建一个可滚动的div，即使鼠标位于内容（可滚动div内），也不仅仅在它旁边（它在空白处）滚动。这就是我到目前为止所做的：

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";
}

在Chrome中没问题在IE8 +中没问题（我知道黑客）在Safari中，当我滚动时内容会震动很多，我可以解决这个问题吗？（我想解决这个问题）

工作小提琴 - ＆gt; https://jsfiddle.net/8oj0sge4/6/

＆＃13;

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";
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

谢谢你们。

Answer 1

我希望这个演示可以帮助您在鼠标悬停和鼠标离开div时使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>

Answer 2

您只需添加此js文件即可获得平滑的滚动效果。

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

live deomo

http://code.nath.co/scrollSpeed

Answer 3

不是100％确定你在做什么，但你可以用css＆＃34;固定＆＃34;来获得固定位置。它会留在你放的地方。以下css修复了页面底部。

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

滚动位置已有答案： How to get scrollbar position with Javascript?

Answer 4

我不知道内容是多么重要，我的意思是它需要保持可选择。

如果不是一个非常好的解决方案就是使用#wrapper .main{ pointer-events: none; }，这意味着内容不会从鼠标获取任何事件，它会通过它到它后面的下一个元素 - 在你的情况下滚动会去直接到#wrapper。

Answer 5

Safari这样做是因为每个浏览器都有自己的滚动。如果你在手机上有一个固定的标题，它会很有弹性，如果你在PC上这样做，它就会正常。资源管理器滚动平滑，Chrome滚动到没有平滑过渡的地方。

Answer 6

你的#main-site是＆＃34; jiggling＆＃34;是因为浏览器保持＆＃34;重绘＆＃34;这个元素的位置。

解决此问题的一个诀窍称为Debounce Function，（您也可以谷歌查看其他变体。）基本想法是推迟scroll event handler清除那些未触发的回调。

在您的情况下，您可能会这样做：

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);
}

如果你一直看到摇晃问题，你可以简单地编辑延迟参数（即，改变10到50）。不利的一面是，#main-site元素会在一段时间内被切断顶部`，具体取决于您的延迟设置。

Answer 7

由于您的代码在Chrome和IE上完美运行，因此Safari上的scrollHeight或offsetHeight属性可能存在错误。我建议您使用getBoundingClientRect来计算元素位置，因为这种方法更可靠，更准确。

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

专注于内部div时滚动div

7 个答案: