Horizontal scrolling inside Bootstrap modal
Question
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>
1 answers
solution1
2 ACCPTED 2014-05-24 18:00:44
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.