问题描述
|
我的页面布局带有内部
<div id=\"content\">
元素,其中包含页面上的重要内容。关于设计的重要部分是:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
现在,当包含的文本大于300px时,我需要能够滚动它。即使鼠标没有悬停元素,也可以滚动<div>
(箭头键也应该起作用)吗?
请注意,我不想禁用“全局”滚动:页面上应该有两个滚动条,即全局滚动条和<div>
的滚动条。
唯一更改的是,内部的<div>
应该始终滚动,除非它不再移动(在这种情况下页面应该开始滚动)。
这有可能实现吗?
编辑
我认为问题有点令人困惑,因此我将附加一系列我希望它如何工作的信息。 (Khez已经提供了概念证明。)
第一张图片是页面打开后的外观。
现在,鼠标坐在指示的位置并滚动,应该发生的是
首先,内部div滚动其内容(图2)
内部div已完成滚动(图3)
主体元素滚动,以便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>
,这是一个可能有效的解决方案:(提琴: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\');
}
})
这有点越野车,但这是一个开始:-)
,我相信您可以实现这一目标的唯一方法是使用框架。
框架-W3Schools参考
,如果您只想定位固定的\“ div \”并仅滚动它,也许可以使用以下技巧:
http://jsfiddle.net/3cpvT/
使用鼠标滚轮和各种键滚动可以正常工作。唯一的问题是滚动条仅在文档主体上。
,我找到了解决方案...并不完美... 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上的mouseent上左右移动