在Bootstrap模式内水平滚动

Question

I have a gallery inside my modal window done via Bootstrap. 我的模态窗口中有一个通过Bootstrap完成的画廊。 I want to be able to horizontally scroll within it using this: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ . 我希望能够使用以下命令在其中水平滚动： http : //css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ 。

The problem is, it scrolls the page behind it, not the actual modal window. 问题是，它滚动了它后面的页面，而不是实际的模式窗口。 When I don't have the Horizontal Scrolling script on, I can scroll in the modal with shift+mousewheel, which is what I want to do width the script(just without using shift ofcourse). 当我没有水平滚动脚本时，我可以使用shift + mousewheel滚动模态，这就是我想要宽度脚本的方式（只是不使用课程移动）。

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

HTML: 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

Okay, made it work! 好吧，让它工作！ All I did was change the scrolling script, so it doesn't scroll in html and body, but on .modal, which is the main class of the modal window! 我所做的只是更改了滚动脚本，因此它不会在html和body中滚动，而是在.modal（模态窗口的主要类）上滚动！

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

Changed 变

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

To 至

$(".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