Bootstrap 模式内的水平滚动答案

【问题标题】：Horizontal scrolling inside Bootstrap modalBootstrap 模式内的水平滚动
【发布时间】：2014-07-13 22:09:16
【问题描述】：

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

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

我的 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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap scroll

【解决方案1】：

好的，成功了！我所做的只是更改滚动脚本，所以它不会在 html 和 body 中滚动，而是在 .modal 上滚动，这是模态窗口的主类！

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

改变了

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

到

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

【讨论】：