如何使用Jquery移動溢出div內的元素？

我正在嘗試使用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與哪個參考？我很想最終把實施的功能放到按鈕（紫色箭頭）上。

請與我分享您的見解！我很期待。

來源

2017-02-11 Sungpah Lee

使用html部分的引導程序？ – Ayan

這是大約你在找什麼？ https://jsfiddle.net/0qtjj04m/1/ – Ayan

嗨，阿燕，不要。你的jsfiddle只是用紅色框表示虛線框。當你看到我的問題時，我已經在裏面放滿了紅色的盒子。當用戶向下滾動/向上時，視圖向左/向右移動。我希望它使用jQuery來做到這一點。通過這樣做，用戶將點擊按鈕使視圖向左/向右移動。 –

讓我們先從一個解決方案的概要：

當用戶點擊移動按鈕（mousedown），啓動程序滾動，在緩慢的速度，內部窗格的右端。
當用戶停止按住鼠標鍵（mouseup）時，停止編程式滾動。
通過添加必要的事件，使其適用於啓用了觸摸的設備。

與jQuery.scrollable（我寫的），這只是幾行的問題。假設滾動容器#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(); 
    }); 

});

看一看這個simplified demo（code view），看看它是怎麼工作。

來源

2017-02-11 15:39:57 hashchange

This正是我想要實現的！OMG Awesome !!!非常感謝！ –

如何使用Jquery移動溢出div內的元素？

回答

相關問題