Question

我有一个div ＆＃34; wtb_wrapper_middle ＆＃34;在我的网页中间。

对于该div只能在网页中滚动。左右div不可移动，它固定在我的网页上。

所以我想鼠标总是专注于那个特定的div，只要我点击鼠标或鼠标悬停。意味着当我使用键盘向上或向下按钮时，特定的div应该只是滚动。

JQuery中是否有可能。

我的代码如下所示。

<div id="wtb_wrapper_inner">
    <div id="wrapper_left">
       ....
       ....
       ....
    </div>
    <div id="wtb_wrapper_middle">
       ....
       ....
       ....
       ....
    </div>
    <div id="wtb_wrapper_right">
       ....
       ....
       ....
    </div>
</div>

从上面的html代码＆＃34; wtb_wrapper_middle＆＃34;区域仅在我的网页中滚动。

我试过以下

window.onload = function() {
  document.getElementById("wtb_wrapper_middle_inner").focus();
};

在此代码中仅关注页面加载，但如果在其他地方单击鼠标，那时也应该滚动中间区域。那不行。

我的Ajax回调函数如下所示

$.ajax({
    type: "POST",
    url: "search.php?ajaxrequest=yes",
    data: query_string
 }).done(function( data ) {
     $(".wtb_p_loader").remove();
     $("#wtb_wm_listing").append(data);
 });

我将返回成功数据附加到di wtb_wm_listing ，这是我放在主div wtb_wrapper_middle

内

任何人帮助我成功..

Answer 1

你可以使用css position：fixed; 无论滚动位置如何，两个外部div都固定在屏幕上。然后无论鼠标指针在哪里，中央div都会滚动。您可以使用顶部和底部来固定屏幕的整个高度，然后左右两侧固定每个屏幕。您仍然可以与固定外部div中的内容进行交互。而Html是

    <div class='left'>
    <a href='#'>Hover to check the  mouse focus and scorll</a>
</div>
<div class='center'>
   //some long content
</div>
<div class='right'>
</div>

执行此操作的Css。

a {
    color: #000;
    display: block;
    font-family: arial;
    margin: 10px;
    text-decoration: none;  
}

a:hover { 
    background-color: #f03055;
    color: #fafafa;
}

p {
    color: #fafafa;
    font-family: arial;
    line-height: 24px;
    margin: 0 0 25px 0;
    padding: 0 2%;
}

.center {
    background-color: #97c;
    height: 2000px;
    margin: 0 25%;
    width: 50%%;    
}

.left {
    background-color: #7c9;
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: 25%;
}

.right {
    background-color: #7c9;
    bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 25%;
}

Answer 2

编辑：过滤掉输入元素

document.body.onkeydown = function(event){
   var e = event || window.event,
   target = e.target || e.srcElement;

   if (target.tagName.toUpperCase() == 'INPUT') return;
   document.getElementById("wtb_wrapper_middle_inner").focus(); 
};

每当keydown事件发生时，这会将焦点移到中间div。

始终将鼠标光标聚焦在JQuery中的特定div中

2 个答案: