Javascript 始终滚动div元素，而不是页面本身

我有一个内部

元素的页面布局，其中包含页面上的重要内容。设计的重要部分是：

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

现在，当包含的文本大于300px时，我需要能够滚动它。是否可以滚动

，即使鼠标未悬停在元素上（箭头键也应可用）

注意，我不想禁用“全局”滚动：页面上应该有两个滚动条，全局滚动条和

的滚动条

唯一改变的是内部的

应该一直滚动，除非它不能再移动了（在这种情况下，页面应该开始滚动）

这有可能实现吗

编辑

我认为这个问题有点让人困惑，所以我将附加一系列我希望它如何工作的内容。（Khez已经提供了概念证明。）

第一个图像是页面打开时的外观

现在，鼠标位于指定的位置并滚动，应该发生的是

• 首先，内部div滚动其内容（图2）
• 内部div已完成滚动（图3）
• body元素滚动以使div本身移动。（图4）

希望现在更清楚一点

---

（图片来源于gomockingbird.com）

我认为如果不编写脚本就不可能实现，考虑到滚动元素（点击、滚动、向下箭头、空格键）的众多事件，这可能会很混乱。

我相信实现这一点的唯一方法是使用框架

---

一个选项可以是使用jQuery滚动插件。我知道它可以在div上创建滚动条。您只需要添加自己的逻辑，以便在按下键盘按钮时捕捉事件。只需查看箭头键的键代码并使div向下滚动即可

可以找到插件

你可以这样使用它

<script type="text/javascript">
  // append scrollbar to all DOM nodes with class css-scrollbar
  $(function(){
    $('.css-scrollbar').scrollbar();
  })
</script>

//使用css scrollbar类将scrollbar附加到所有DOM节点
$（函数（）{
$（'.css scrollbar'）.scrollbar（）；
})

这里有一个可能有效的解决方案：（fiddle:）

---

这有点麻烦，但这是一个开始：-）

如果你只想有一个固定的定位“div”并只滚动它，也许你可以使用如下技巧：

---

使用鼠标滚轮和各种按键滚动，效果如预期。唯一的问题是滚动条只在文档正文上。

我找到了一个解决方案。。。不完美

CSS:

JS（jQuery）：

---

将整个内容放在固定宽度的div中可以解决文本包装问题。IE浏览器还有一个bug。如果页面具有居中对齐的背景，它将在#scrolldiv

上的鼠标指针上左右移动脚本部分不是问题所在。毕竟，如果没有这个功能，这个网站也不会毫无用处。不过，如果它特别凌乱，那就糟糕了。我不想在不知道自己在做什么的情况下引入大量的bug。接受这一点是因为它是唯一没有副作用的解决方案。哪个解决方案？在同一个答案中框架和框架坑是一个挑战，让他们都在；p链接并没有真正显示，我将如何用框架实现这一点。但既然这不是一个选择，我真的不需要知道@Debilski您只需使用CSS设置框架的高度，如果其中包含的页面需要，则滚动条将自动显示：）但好吧，祝您好运。滚动条与纯div解决方案完美结合。问题是，我希望滚动它而不将其悬停。我尝试使用

窗口.onscroll

捕获事件。这有点可行，但肯定不可靠。看看我的表。只在这里发布，因为它可能只是可能会在某人的脑海中激发一个想法。一分钟后，我正在为你的更新制作小提琴。我发布了你的更新的答案。我认为所有等待滚动事件的方法的主要问题是：当身体不滚动时，它们将不起作用。只有一个

$（窗口）。滚动
事件，当有身体的“物理”卷轴时。当机身足够小，适合屏幕时，什么也不会发生。
var last_scroll = -1;
$(window).scroll(function(e){
    if($('#content').scrollTop());
    var scroll = $('#view').data('scroll');
    if(scroll == undefined){
        $('#content').data('scroll', 5);
        scroll = $('#content').data('scroll');
    }
    else {
        $('#content').data('scroll', scroll + 5);
        scroll = $('#view').data('scroll');
    }
    /*
    console.log({
        'window scroll':$('window').scrollTop(), 
        'scroll var': scroll, 
        'view scroll':$('#view').scrollTop(),
        'view height':$('#view').height(),
        'ls': last_scroll 
    });
    //*/
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll
        last_scroll = $('#content').scrollTop()
        $('#content').scrollTop($('#content').scrollTop() + scroll);

        $(this).scrollTop(0);
        //console.log(e, 'scrolling');
    }

})

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

if ($("body").height() > $(window).height()) {
    var top;
    $('#scrolldiv').mouseenter(function() {
        top = $(window).scrollTop();
        $('body').addClass('noscroll').css({top: -top + 'px'});
    }).mouseleave(function() {
        $('body').removeClass('noscroll');
        $(window).scrollTop(top);
    });
}