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

Question

我有一个带有内部

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

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

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

？

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

滚动条。

唯一改变的是内部

应始终滚动，除非它无法再移动（在这种情况下页面应开始滚动）。

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

编辑

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

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

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

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

希望现在更清楚了。

（图片感谢 gomockingbird.com）

Answer 1

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

Answer 2

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

该插件可以在此处找到。

你可以这样使用它；

<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

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

框架 - W3Schools 参考

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 上的 mouseenter 上左右移动