<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" />
<title>Create a Scrolling Menu: Result</title>
<style type="text/css">
body {
margin:0;
padding: 0;
background-color: #777674;
}
div.sc_menu_wrapper {
position: relative;
height: calc(100vh - 124px);
margin: 62px 0 0;
padding: 0;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 148px;
overflow: auto
}
div.sc_menu {
margin:0;
padding:12px;
}
.sc_menu .view {
display: block;
margin-bottom: 5px;
width: 123px;
/* When image support is turned off */
overflow: hidden;
position: relative;
text-align: center;
border-style: solid 2px
}
.sc_menu img {
display: block;
border: none;
width: inherit
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 12px;
margin: 0 auto;
padding: 15px 0;
width: 104px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* @media all and (max-width: 1024px) {
.sc_menu_wrapper {
overflow: auto !important
}
} */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 15;
/* сдесь изменить код для мобильных - скачет меню
if ($(window)widthInner() > 1024) {
true;
}
else {
return false;
}; */
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
}
}
/* или сдесь изменить код для мобильного отображения
$(function(){if ($(window)widthInner() > 1024) makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
*/
$(function(){makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>
</head>
<body>
<div id="pro">
<div class="sc_menu_wrapper">
<div class="sc_menu">
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
<div class="view view-tenth">
<img src="http://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg">
</div>
</div>
</div>
</body>
</html>
вопрос таков - где можно отключить скрипт для мобильного траффа, к примеру $(window)widthInner() > 1024) или же доделать код для корректного отображения на мобилках, ведь передвижения идет по средством .mousemove, и как правильно подключить toutchMove? сейчас прото напросто использую @media для мобильного, но появляется проблема что передвижения еще и привязано к inactiveMargin и мобильный прокручивает содержимое к данным координатам. Извените что выложил код в тексте незнаю как заполняется форма
P.S. вроде работает, добавил в конце, как конец выполнения функции:
$(document).ready(function(){
if ($(document).width() > 1024) makeScrollable("div.sc_menu_wrapper", "div.sc_menu")
});
даже ничего мудрить с передвижениям в мобильных с inactiveMargin не пришлось. Но у кого есть желания повозится под touchmove - всегда пожалуйста ...
