Bootstrap模态内的水平滚动 [英] Horizontal scrolling inside Bootstrap modal
问题描述
我在通过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 / javascriptsrc =http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js>< / script>
< / head>
< body>
<！ - 按钮触发模式 - >
< h2> Modal Gallery< / h2>
< button class =btn btn-primary btn-lgdata-toggle =modaldata-target =＃myModal>
启动演示模式
< / button>
<！ - Modal - >
< div class =modal fadeid =myModaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button>
< h4 class =modal-titleid =myModalLabel>模式标题< / h4>
< / div>
< div class =modal-body>
< div id =gallery-modal>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< / div>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< button type =buttonclass =btn btn-primary>保存更改< / button>
< / div>
< / div>
< h2>普通图库< / h2>
< div id =gallery>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< img src =http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpgalt =>
< / div>
< / body>
好吧，让它工作！我所做的只是更改滚动脚本，所以它不会在html和body中滚动，而是在.modal上，这是模式窗口的主类！
更新JSFiddle： http://jsfiddle.net/8XdVt/28/ 。
已更改
$（html，body）。mousewheel（function（event，delta ）
到
$（。modal）。mousewheel（function（event，delta）
I have a gallery inside my modal window done via Bootstrap. I want to be able to horizontally scroll within it using this: 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).
My 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">×</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>
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!
Updated JSFiddle: http://jsfiddle.net/8XdVt/28/.
Changed
$("html,body").mousewheel(function(event, delta)
To
$(".modal").mousewheel(function(event, delta)
这篇关于Bootstrap模态内的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
