Jquery 如何在顶部和侧面标签正确滚动的情况下水平和垂直滚动html元素_Jquery_Html_Css_Scrollbar

Jquery 如何在顶部和侧面标签正确滚动的情况下水平和垂直滚动html元素

jquery html css

Jquery 如何在顶部和侧面标签正确滚动的情况下水平和垂直滚动html元素,jquery,html,css,scrollbar,Jquery,Html,Css,Scrollbar,我想滚动紫色区域，同时保持白点对齐。我当前的代码有两个相关问题：蓝色矩形比紫色矩形宽将滚动条一直向右移动（使点向左移动）时，紫色矩形中的点移动得比蓝色矩形中的点稍微远一点如何解决这两个问题？下面是我当前的代码（html/svg/css/jquery） <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">

我想滚动紫色区域，同时保持白点对齐。

我当前的代码有两个相关问题：

蓝色矩形比紫色矩形宽

将滚动条一直向右移动（使点向左移动）时，紫色矩形中的点移动得比蓝色矩形中的点稍微远一点

如何解决这两个问题？下面是我当前的代码（html/svg/css/jquery）

<html>
  <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>   
    <style>
      .c00 { overflow: hidden;  float: left;}
      .c01 { overflow: hidden;  width: 300;}
      .c10 { overflow: hidden;  height: 200; float: left;}
      .c11 { overflow: auto; width: 300;}

      .e11 { height: 200}

    </style>
  </head>
  <body>
    <div class="c00">
      <div class="e00">
        <svg  version="1.1" width="100" height="100">
      <rect width="100" height="100" fill="red"/>
          <circle cx="50" cy="50" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div class="c01 horzLinked">
      <div class="e01">
        <svg  version="1.1" width="600" height="100">
      <rect width="600" height="100" fill="blue"/>
          <circle cx="300" cy="50" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="c10 vertLinked">
      <div class="e10">
        <svg  version="1.1" width="100" height="400">
      <rect width="100" height="400" fill="green"/>
          <circle cx="50" cy="200" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div class="c11 vertLinked horzLinked">
      <div class="e11">
        <svg  version="1.1" width="600" height="400">
      <rect width="600" height="400" fill="purple"/>
          <circle cx="300" cy="200" r="10" fill="white"/>
    </svg>
      </div>
    </div>


    <script>

$(function(){
    $('.vertLinked').scroll(function(){
        $('.vertLinked').scrollTop($(this).scrollTop());    
    })
})
$(function(){
    $('.horzLinked').scroll(function(){
        $('.horzLinked').scrollLeft($(this).scrollLeft());    
    })
})

    </script>

  </body>
</html>


.c00{溢出：隐藏；浮动：左；}
.c01{溢出：隐藏；宽度：300；}
.c10{溢出：隐藏；高度：200；浮动：左；}
.c11{溢出：自动；宽度：300；}
.e11{高度：200}
$（函数（）{
$（'.vertLinked'）。滚动（函数（）{
$（'.vertLinked'）.scrollTop（$（this.scrollTop（））；
})
})
$（函数（）{
$（'.horzLinked'）。滚动（函数（）{
$（'.horzLinked'）.scrollLeft（$（this.scrollLeft（））；
})
})

因为滚动条宽度将包含在div width中，所以您会发现蓝色矩形内容比紫色矩形内容宽要解决这个问题，您有两种解决方案

1-仅当紫色矩形水平溢出时，通过向其宽度添加滚动条宽度，使紫色矩形比蓝色矩形宽

2-如果scrollLeft大于矩形宽度，则扣除滚动条宽度

下面是解决方案2的代码

<html>
  <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>   
    <style>
      .c00 { overflow: hidden;  float: left;}
      .c01 { overflow: hidden;  width: 300px;}
      .c10 { overflow: hidden;  height: 200px; float: left;}
      .c11 { overflow: auto; width: 300px;}

      .e11 { height: 200px}

    </style>
  </head>
  <body>
    <div class="c00">
      <div class="e00">
        <svg  version="1.1" width="100" height="100">
      <rect width="100" height="100" fill="red"/>
          <circle cx="50" cy="50" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div class="c01 horzLinked">
      <div class="e01">
        <svg  version="1.1" width="600" height="100">
      <rect width="600" height="100" fill="blue"/>
          <circle cx="300" cy="50" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="c10 vertLinked">
      <div class="e10">
        <svg  version="1.1" width="100" height="400">
      <rect width="100" height="400" fill="green"/>
          <circle cx="50" cy="200" r="10" fill="white"/>
    </svg>
      </div>
    </div>
    <div class="c11 vertLinked horzLinked">
      <div class="e11">
        <svg  version="1.1" width="600" height="400">
      <rect width="600" height="400" fill="purple"/>
          <circle cx="300" cy="200" r="10" fill="white"/>
    </svg>
      </div>
    </div>


    <script>

$(function(){
    $('.vertLinked').scroll(function(){
        $('.vertLinked').scrollTop($(this).scrollTop());    
    })
})
$(function(){
    $('.horzLinked').scroll(function(){
        var scrollLeft;
        $this = $(this);
        if ($this.scrollLeft() > $this.width())
            scrollLeft = $this.scrollLeft() - getScrollbarWidth();
        else
            scrollLeft = $this.scrollLeft()

        $('.horzLinked').scrollLeft(scrollLeft);    
    })
})

function getScrollbarWidth() {
        var $inner = $('<div style="width: 100%; height:200px;">test</div>'),
            $outer = $('<div style="width:200px;height:150px; position: absolute; top: 0; left: 0; visibility: hidden; overflow:hidden;"></div>').append($inner),
            inner = $inner[0],
            outer = $outer[0];

        $('body').append(outer);
        var width1 = inner.offsetWidth;
        $outer.css('overflow', 'scroll');
        var width2 = outer.clientWidth;
        $outer.remove();

        return (width1 - width2);
    }
    </script>

  </body>
</html>


.c00{溢出：隐藏；浮动：左；}
.c01{溢出：隐藏；宽度：300px；}
.c10{溢出：隐藏；高度：200px；浮动：左；}
.c11{溢出：自动；宽度：300px；}
.e11{高度：200px}
$（函数（）{
$（'.vertLinked'）。滚动（函数（）{
$（'.vertLinked'）.scrollTop（$（this.scrollTop（））；
})
})
$（函数（）{
$（'.horzLinked'）。滚动（函数（）{
左上角；
$this=$（this）；
如果（$this.scrollLeft（）>$this.width（））
scrollLeft=$this.scrollLeft（）-getScrollbarWidth（）；
其他的
scrollLeft=$this.scrollLeft（）
$（'.horzLinked'）.scrollLeft（scrollLeft）；
})
})
函数getScrollbarWidth（）{
变量$inner=$（'test'），
$outer=$（''）.append（$inner），
内部=$inner[0]，
外部=$outer[0]；
$（'body'）。追加（外部）；
var width1=内部偏移网络宽度；
$outer.css（'overflow'，'scroll'）；
var width2=outer.clientWidth；
$outer.remove（）；
返回（宽度1-宽度2）；
}

这是一个

穆罕默德-感谢您的解释和解决方案。它修复了我上面描述的问题#2，这是两者中更严重的问题。在您的解决方案中，不可能将水平滚动条一直向右移动，因此现在蓝色和紫色矩形中的白点保持对齐。那太好了。您的答案还有一个很好的功能，用于计算滚动条的宽度。我想知道我是否可以用它使蓝色矩形与紫色矩形的宽度相同。我想我会调查这一可能性，也许还会解决我的问题。编辑评论：穆罕默德-谢谢你的解释和解决方案。它修复了我上面描述的问题#2，这是两者中更严重的问题。在您的解决方案中，不可能将水平滚动条一直向右移动，因此现在蓝色和紫色矩形中的白点保持对齐。那太好了。您的答案有一个很好的功能，可以计算滚动条的宽度。我还将调查您提出的第一个解决方案，这可能会解决我的问题#1。如果紫色矩形上出现水平滚动条，您可以通过选中div.scrollWidth>div.clientWidth来尝试解决方案1。根据穆罕默德的建议，我可以确定滚动条的宽度并相应地调整矩形的大小。我还发现使用a可以更好地控制矩形的布局。