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

我有一个页面布局，内部为<div id="content">元素，其中包含页面上的重要内容。关于设计的重要部分是：始终滚动div元素而不是页面本身

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

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

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

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

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

编辑

我认为这个问题是有点混乱，所以我会追加的我怎么想它的工作序列。（Khez已经提供了一个概念验证。）

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

，鼠标坐在指示位置和卷轴和什么应该发生的是

首先内的div滚动其内容（图2）
内的div已完成滚动（图3）
body元素会滚动以便div自身被移动。（图4）

希望现在有点清楚。

Scroll concept （图像感谢gomockingbird.com）

来源

2011-04-15 Debilski

我尝试使用`window.onscroll`来捕获事件。它有点作品，但绝对不会。看看我的[jsfiddle]（http://jsfiddle.net/Khez/cKDSb/）。只是在这里发布，因为也许它会引发某人的想法。 – Khez 2011-04-15 14:56:03

一分钟即时通讯工具为您的更新 – Neal 2011-04-15 15:56:38

我发布了一个答案更新 – Neal 2011-04-15 16:15:44

我不认为这是可能实现无脚本吧，这可能是凌乱的，考虑其滚动的元素众多的事件（单击，滚轮，向下箭头，空格键）。

来源

2011-04-15 14:26:51 alex

脚本部分不是问题。毕竟，如果没有这个功能，这个网站将毫无用处。这很糟糕，如果它特别混乱。我不想在不知道自己在做什么的情况下引入大量的错误。 – Debilski 2011-04-15 14:31:34

我相信你可以做到这一点的唯一方法是通过使用框架。

Frames - W3Schools Reference

来源

2011-04-15 14:32:29 Ollie

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

该插件可以找到here。

你可以像这样使用它;

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

来源

2011-04-15 14:47:04 Rob

这里也许是一个工作的解决方案：（小提琴：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'); 
    } 

})

这是一个有点马车，但它是一个开始:-)

来源

2011-04-15 16:15:24 Neal

如果你只是想有一个固定的位置“格”，并滚动只有它，也许你可以使用像一招：

http://jsfiddle.net/3cpvT/

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

来源

2011-12-28 11:51:16 Qtax

我找到了一个解决方案...不完美... 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浏览器还有一个bug。如果页面具有中心对齐的背景，它将在#scrolldiv上的鼠标中心左右移动

来源

2013-04-18 12:00:46

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

回答

相关问题