Question

我的模态窗口中有一个通过Bootstrap完成的画廊。我希望能够使用以下方式在其中水平滚动：http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/。

问题是，它滚动页面后面的页面，而不是实际的模态窗口。当我没有打开水平滚动脚本时，我可以使用shift + mousewheel滚动模态，这就是我想要做的宽度脚本（只是不使用shift ofcourse）。

我的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 个答案: