在Bootstrap模式內水平滾動

Question

我的模態窗口中有一個通過Bootstrap完成的畫廊。 我希望能夠使用以下命令在其中水平滾動： http : //css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ 。

問題是，它滾動了它后面的頁面，而不是實際的模式窗口。 當我沒有水平滾動腳本時，我可以使用shift + mousewheel滾動模態，這就是我想要寬度腳本的方式（只是不使用課程移動）。

我的JSFiddle： http : //jsfiddle.net/8XdVt/22/

HTML：

<head>
    <script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
</head>
<body>
    <!-- Button trigger modal -->
    <h2>Modal Gallery</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <div id="gallery-modal">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
            </div>    
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

<h2>Normal Gallery</h2>      
<div id="gallery">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
                <img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
            </div>   
</body>

Answer 1

好吧，讓它工作！ 我所做的只是更改了滾動腳本，因此它不會在html和body中滾動，而是在.modal（模態窗口的主要類）上滾動！

更新了JSFiddle： http : //jsfiddle.net/8XdVt/28/ 。

變

$("html,body").mousewheel(function(event, delta)

至

$(".modal").mousewheel(function(event, delta)

在Bootstrap模式內水平滾動

問題描述

1 個解決方案

解決方案1
2 已采納 2014-05-24 18:00:44

在Bootstrap模式內水平滾動

問題描述

1 個解決方案

解決方案1 2 已采納 2014-05-24 18:00:44

解決方案1
2 已采納 2014-05-24 18:00:44