Question

我有一个内部<div id="content">元素的页面布局，其中包含页面上的重要内容。设计的重要部分是：

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

现在当包含的文本大于300px时，我需要能够滚动它。是否可以滚动<div>，即使鼠标没有悬停在元素上（箭头键也应该有效）？

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

唯一改变的是内部<div>应该始终滚动，除非它不能再移动（在这种情况下页面应该开始滚动）。

这有可能以某种方式实现吗？

修改

我认为这个问题有点令人困惑，所以我会附加一系列我想要它的工作方式。（Khez已经提供了一个概念验证。）

第一张图片是打开时页面的外观。

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

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

希望现在有点清楚。

Scroll concept （图片感谢gomockingbird.com）

Answer 1

考虑到滚动元素的众多事件（点击，滚轮，向下箭头，空格键），我认为没有脚本就可以实现，这可能很麻烦。

Answer 2

一个选项可能是使用jQuery滚动插件。我知道它可以在div上创建滚动条。您需要自己添加的唯一事情是在按下键盘按钮时捕获事件的逻辑。只需检查箭头键的密钥代码，然后向下滚动div。

可以找到该插件here。

你可以像这样使用它;

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

Answer 3

这是一个可行的解决方案:(小提琴：http://jsfiddle.net/maniator/9sb2a/）

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

})

这有点儿马车但它是一个开始： - ）

Answer 4

我相信你能做到这一点的唯一方法就是使用框架。

Frames - W3Schools Reference

Answer 5

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

http://jsfiddle.net/3cpvT/

使用鼠标滚轮滚动和各种键按预期工作。唯一的问题是滚动条仅在文档主体上。

Answer 6

我找到了一个解决方案......不完美...... http://jsfiddle.net/fGjUD/6/。

CSS：

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

JS（jQuery）：

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

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

上的鼠标中心左右移动

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

6 个答案: