Javascript 如何使用Jquery移动溢出div中的元素？

我正在尝试使用Jquery命令移动溢出div中的元素。在这里，我附加的形象

我附上了我试图实现的图像。蓝色虚线框中有一个红色框溢出蓝色框（父项）。我希望红色框将在带有Jquery的蓝色虚线框中移动

        <div style="position:relative;">
          <div class="row" id='blue_box'
            style="overflow:scroll; overflow-y:hidden;
            width:100%; border:10px dotted blue;">
            <div id = 'red_box' class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
              style="display:flex;justify-content:space-around;
              width:90vw; max-width:1296px; height:32vw; margin:10px;
              border: 1px solid red;">
              <div style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content..I want to move red box that is overflowing within the blue box..
              </div>
            </div>
          </div>
        </div>

内容..我想移动蓝框中溢出的红框。。

我如何处理这个问题？如何使用scrollTop（？）或scrollRight与哪个引用？我希望最终将实现的功能放到按钮上（紫色箭头）

---

请与我分享你的见解！我很期待。

让我们从解决方案的概要开始：

$( function () {
  
  var $container = $( "#outer" ),
      $left = $( "#left" ),
      $right = $( "#right" ),
      $both = $left.add( $right ),
      
      opts = { duration: 2000 };
  
  $left.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "left", opts );
  } );
           
  $right.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "right", opts );
  } );
  
  $both.on( "mouseup touchend pointerup", function ()  {
    $container.stopScroll();
  } );
  
  // Controls are inside the scrolling area, so exclude them
  // from automatic detection of user interaction, see
  // https://github.com/hashchange/jquery.scrollable#exceptions-for-selected-elements
  $both.on( "mousedown touchstart pointerdown", function ( event ) { 
    event.stopPropagation(); 
  } );
  
} );

• 当用户点击移动按钮（

  mousedown

  ）时，以慢速启动一个编程滚动，滚动到内部窗格的右端
• 当用户停止按住鼠标键（

  mouseup

  ）时，停止编程滚动
• 通过添加必要的事件，使其也适用于触控设备

用（我已经写过的），这只是几行字的问题。假设有一个滚动容器

#outer

，以及左右移动控件（

#left

和

#right

），这是一个可行的解决方案：

$( function () {
  
  var $container = $( "#outer" ),
      $left = $( "#left" ),
      $right = $( "#right" ),
      $both = $left.add( $right ),
      
      opts = { duration: 2000 };
  
  $left.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "left", opts );
  } );
           
  $right.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "right", opts );
  } );
  
  $both.on( "mouseup touchend pointerup", function ()  {
    $container.stopScroll();
  } );
  
  // Controls are inside the scrolling area, so exclude them
  // from automatic detection of user interaction, see
  // https://github.com/hashchange/jquery.scrollable#exceptions-for-selected-elements
  $both.on( "mousedown touchstart pointerdown", function ( event ) { 
    event.stopPropagation(); 
  } );
  
} );

---

请查看此（）以了解它的工作情况。

对html部分使用引导程序？这大概就是您想要的吗？嗨，阿扬，不。您的JSFIDLE只渲染带有红色框的虚线框。正如你看到的我的问题，我已经有了这个和溢出的红色框内。当用户向下/向上滚动时，视图将向左/向右移动。我想让它通过jquery实现这一点。这样，用户将单击该按钮使视图向左/向右移动。那么您希望它仅使用纯jQuery进行移动吗？你只想让红色框在里面，而其他的内容就在里面？我用小提琴运行了你的代码，看起来你的红色边框已经在蓝色边框里面了。