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

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

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

现在，当包含的文本大于300px时，我需要能够滚动它。即使鼠标没有悬停元素，也可以滚动<div>（箭头键也应该起作用）吗？请注意，我不想禁用“全局”滚动：页面上应该有两个滚动条，即全局滚动条和<div>的滚动条。唯一更改的是，内部的<div>应该始终滚动，除非它不再移动（在这种情况下页面应该开始滚动）。这有可能实现吗？编辑我认为问题有点令人困惑，因此我将附加一系列我希望它如何工作的信息。（Khez已经提供了概念证明。）第一张图片是页面打开后的外观。现在，鼠标坐在指示的位置并滚动，应该发生的是首先，内部div滚动其内容（图2）内部div已完成滚动（图3）主体元素滚动，以便div本身被移动。（图4）希望它现在变得更清晰了。（图片感谢gomockingbird.com）

已邀请:

6 个回复

芯伶句餐绕

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

伐教爸

一个选项可能是使用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上左右移动

要回复问题请先登录或注册

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

6 个回复

发起人

mousewheel

javascript

scroll

focus

css

问题状态

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

与内容相关的链接

6 个回复

发起人

mousewheel

javascript

scroll

focus

css

问题状态