Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как отловить остановку колёсика мыши?

Есть мысль поставить setinterval и проверять, изменилось ли значение прокрутки. И если оно изменяться перестало - значит колёсико мыши остановилось. У такого решения есть недостатки, а именно - какой выбрать интервал, чтобы было корректно. Пользователи разные, степень заторможенности тоже.
Ответ: Есть горизонтальный просмотрщик фотографий, сдвиг производится изменением left + css анимация. Если менять его при каждом срабатывании события прокрутки - получается нечто невнятное. Хотелось бы менять это left после остановки колёсика на суммарную величину прокрутки.
Вопрос: Как отследить прокрутку колесика мыши вверх?

Добрый день! есть задача: отследить прокрутку колесика мыши вверх в любой части страницы ( или по экрану) и вызвать какую-то функцию...
Ответ: face2005,


Вопрос: При прокрутке колесиком мыши все разваливается

учусь верстать шаблон сайта, все нормально смотрелось, пока не покрутил колесиком мышки, все разлезлось, подскажите как закрипить элементы, что бы когда менялься маштаб, не разлазисоль вот код
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
<title>Каталог</title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class = "main">
       
         <div class = "hedy">
             <img src="img/logo.png" alt="альтернативный текст">
             </br>
             <span>КАТАЛОГ РЖ</span>
           <p>электронная версия</p>
         </div>
            <div class = "menu">
                <ul>
                   <li><a href = "#">Главная</a></li>
                   <li><a href = "#">Просмотр РЖ</a></li>
                   <li><a href = "#">Добавление записи в РЖ</a></li>
                   <li><a href = "#">Управление журналами и разделами</a></li>
                   <li><a href = "#">Помощь</a></li>
                </ul>
 
            </div>
 
    </div>
 
</body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
*{
   margin-top: 20px;
   padding: 0;  
  }
body 
{
  background: url('../img/fon.png') #1A658C center top no-repeat;
}
.main
{
   width: 770px;
   margin-left: 250px;
}
.hedy 
{
 
 
}
.hedy img
{
    width: 100px;
    height: 101px;
    margin-left: 50px;
}
 
.hedy p 
{
    color:#004078;
    font: normal 15px 'Times New Roman';
    padding-left: 20px;
    text-transform: uppercase;
}
.hedy span
{
    color:#004078;
    font: normal 20px 'Times New Roman';
    padding-left: 30px;
    text-transform: uppercase;
}
.menu 
{
    background: linear-gradient(to top, #4186B3, #226592);
    height: 50px;
    width: 770px;
    margin-left: -5px;
}
.menu ul 
{
 
}
.menu li
{
    float: left;
    list-style: none;   
    list-style-image:
}
.menu li a 
{
    text-decoration: none;
    color: #fff;
}
Уходят два вот этих блока
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class = "hedy">
             <img src="img/logo.png" alt="альтернативный текст">
             </br>
             <span>КАТАЛОГ РЖ</span>
           <p>электронная версия</p>
         </div>
            <div class = "menu">
                <ul>
                   <li><a href = "#">Главная</a></li>
                   <li><a href = "#">Просмотр РЖ</a></li>
                   <li><a href = "#">Добавление записи в РЖ</a></li>
                   <li><a href = "#">Управление журналами и разделами</a></li>
                   <li><a href = "#">Помощь</a></li>
                </ul>
 
            </div>
Ответ: Как рас если я Вас правильно понял проблема и есть в том, что дивам задано фиксированная ширина. Если не хотите чтобы все это разваливалось нужно задавать в процентах. И вопрос, а почему Вы до 200 ?Вы думаете, что это кому-то нужно?

Добавлено через 5 минут
И еще у Вас для класса main задано ширина 770 и для меню та самая ширина, а что на второй блок осталось 0???Посмотрите внимательно к тем значениям которые Вы задаете .
Вопрос: Синхронизация двух скролов

Приветствую! помогите пожалуйста студенту:

есть блок в который динамически подгружаются элементы(в блоке всегда присутствует только три элемента из скольки угодного колическтва т.е. я их заменяю)
и есть скрол

на скрол и на блок повешены события onscroll. Я кручу скрол и "вертится" блок.
я мотаю колёсиком мыши блок и должен крутиться скрол.(но у меня это отрабатывает некоректно из за того, что один onscrol вызывает другой)
Подскажите как эту проблему решить?


Вот мы вешаем события:
this.scrollControl.onscroll = function (e) {
            if (delay) {
                scroller.timeStamp = e.timeStamp;
                var timeout = setTimeout(function () { scroller.syncContent(); }, delay);
            } else {
                scroller.syncContent();
            }
        };

        this.scrollWrapper.onscroll = function (e) {
            scroller.syncControl();
        };



вот функция синхронизации скрола при прокрутки блока:
syncControl: function () {

        var body = document.body;
        var offset = this.scrollWrapper.scrollTop;//Замеряем отступ сверху

        var chunks = this.chunkContainer.children;//Кладём в переменую массив элементов с классом .chunk

        var chunkElement = null;
        var chunk = null;
        if (chunkElement = chunks[2]) {
            chunk = $(chunkElement);

            if (offset > chunk.position().top - this.viewportHeight) {
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                //var chunkIndex = +chunk.data('chunk');
                var chunkOffset = chunk.position().top
                
                var scrollOffset = this.scrollWrapper.scrollTop;
                this.unloadChunks(chunkIndex);
                this.getChunk(chunkIndex + 1);
                //console.log(scrollOffset, chunkOffset, chunk.position().top, chunk.height());
                //console.log(offset, 'down');

                this.scrollWrapper.scrollTop = scrollOffset - chunkOffset + chunk.position().top;
                var scrollPercent = this.scrollWrapper.scrollTop / (this.scrollWrapper.scrollHeight - this.scrollWrapper.offsetHeight);
                var verticalEdge = this.scrollPadding.offsetHeight - this.scrollControl.offsetHeight;
                if (this.scrollControl.scrollTop = verticalEdge) {
                    
                } else{
                    this.scrollControl.scrollTop = verticalEdge;
                }
                //this.scrollControl.scrollTop = this.scrollWrapper.scrollTop + this.getChunkOffset(chunkIndex)) /  this.getChunkHeight(chunkIndex)
            }
        } else if (chunkElement = chunks[1]) {
            chunk = $(chunkElement);
            if (offset > chunk.position().top - this.viewportHeight) {
                //var chunkIndex = +chunk.data('chunk');
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                var chunkOffset = chunk.position().top;
                this.unloadChunks(chunkIndex);
                this.getChunk(chunkIndex + 1);
                //console.log(this.scrollWrapper.scrollTop(), chunkOffset, chunk.position().top);
                //console.log(offset, 'down');
                //this.scrollWrapper.scrollTop(this.scrollWrapper.scrollTop() + chunkOffset - chunk.position().top);
            }
        }
        if (chunkElement = chunks[0]) {
            chunk = $(chunkElement);
            if (offset < this.viewportHeight) {
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                //var chunkIndex = +chunk.data('chunk');
                var chunkOffset = chunk.position().top;
                if (chunkIndex > 0) {
                    this.unloadChunks(chunkIndex);
                    this.getChunk(chunkIndex - 1);
                }
                //this.scrollWrapper.scrollTop(this.scrollWrapper.scrollTop() + chunkOffset - chunk.position().top);
                //console.log(this.scrollWrapper.scrollTop(), chunkOffset, chunk.position().top);
                //console.log(offset, 'up');
            }
        }
    }


возможно надо проставить в обработке синхронизации блока с контролером, чтобы он как-то это отлавливал, но как я пока не придумал
syncContent: function () {
        
        if (this.delay && (new Date()).valueOf() - this.timeStamp < this.delay - 50) {//Для чего нужно это условие?
            return;
        }
        
        var body = document.body;
        //var offset = $(this.scrollControl).scrollTop();//Замеряем отступ сверху при мещении тут должно быть целое число
        var offset = window.pageYOffset || this.scrollControl.scrollTop || body.scrollTop;
        //var box1 = this.scrollControl.getBoundingClientRect().top;
        //var clientTop = this.scrollControl.clientTop || body.clientTop || 0;
        //var offset = box1 + scrollTop + clientTop;
        var progress = this.getChunkProgress(offset);


        this.unloadChunks(progress.index);
        var offsetHeight = 0;
        var prevChunk = this.getChunk(progress.index - 1);
        if (prevChunk.length) {
            offsetHeight = prevChunk.position().top;
            //offsetHeight = prevChunk.offsetHeight = prevChunk.position().top;;
        }
        var chunk = this.getChunk(progress.index);
        if (!chunk || !chunk.length) {
            return;
        }
        //console.log(prevChunk, chunk, progress.index);

        //setTimeout(function () { chunk.addClass('entered'); }, 100);
        //chunk.addClass('entered');
        //if (offset > this.controlOffset) {
        //    chunk.addClass('up');
        //}
        this.controlOffset = offset;

        if (prevChunk && prevChunk.length) {
            offsetHeight = prevChunk.position().top;
            //offsetHeight = prevChunk.getBoundingClientRect().top;
        } else {
            offsetHeight = chunk.position().top;
            //offsetHeight = chunk.getBoundingClientRect().top;
        }

        this.getChunk(progress.index + 1);

        var scrollOffset = chunk.position().top - offsetHeight + chunk.height() * progress.progress;
        //var scrollOffset = chunk.position().top - offsetHeight + chunk.height() * progress.progress;
        $(this.scrollWrapper).scrollTop(scrollOffset);
        
    },
Ответ: Александр Щербаков,
onscroll = function (e) {e.stopPropagation();
Вопрос: Зависает снег при скроле

Здравствуйте подскажите кто знает, уже устал ломать голову, снег зависает при использовании колесика мышки, но если использовать скролл окна всё норм.

var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;

			var particle;

			var camera;
			var scene;
			var renderer;

			var mouseX = 0;
			var mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			
			var particles = []; 
			var particleImage = new Image();

			particleImage.src = '/img/ParticleSmoke.png'; 

			function init() {


			//inner
				container = document.createElement('div');
				container.className = "cont_canvas";
				
				//open
				document.body.appendChild(container);
				// down|up																//distance
				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				// area snow
				camera.position.z = 1000;

				scene = new THREE.Scene();
				scene.add(camera);

				renderer = new THREE.CanvasRenderer();
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
				//how snow?
				for (var i = 0; i < 199; i++) {

					particle = new Particle3D( material);

					particle.position.x = Math.random() * 2000 - 1000;
					particle.position.y = Math.random() * 2000 - 1000;
					particle.position.z = Math.random() * 2000 - 1000;
					particle.scale.x = particle.scale.y =  1;
					scene.add( particle );
					particles.push(particle); 
				}
				
				//closed
				container.appendChild( renderer.domElement );

	
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener("mousewheel", MouseWheelHandler, false);
				
				//snow speed 
				setInterval( loop, 1000 / 60 );
				
			}
			
			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}
			
			function onDocumentMouseDown( event ) {
				
				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}
			
			function MouseWheelHandler( event ) {
	
			}

			function loop() {

			for(var i = 0; i<particles.length; i++)
				{

					var particle = particles[i]; 
					particle.updatePhysics(); 
	
					with(particle.position)
					{
						if(y<-1000) y+=2000; 
						if(x>1000) x-=2000; 
						else if(x<-1000) x+=2000; 
						if(z>1000) z-=2000; 
						else if(z<-1000) z+=2000; 
					}				
				}
			//Закругление
				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
				camera.lookAt(scene.position); 

				renderer.render( scene, camera );

				
			}


Забыл добавить, после использования колесика мыши, снег развисает, если произвести клик левой кнопкой мыши в любой области, но ($).click не дала результата...
Ответ:
Сообщение от nekada
Возможно браузеры по разному понимают
Так проверь оно же у тебя один раз определяется, и писать тогда уж так var windowHalfX = SCREEN_WIDTH / 2.
Вопрос: отменить выполнение скрола (scroolto)

Здравствуйте, подскажите, как отменить выполнение scroolto когда идет сам скролинг если крутить мышкой то экран дергается, так как скрипт пытается прокрутить окно до нужной метки... как отменить действие scroolto если во время выполнения произошло событие прокрутки колесика мыши?
Ответ: myocean,
прочитать документацию не судьба
$(document).on('mousewheel', function(event) { $().finish() })
Вопрос: Нажатие на колесико не работает

Есть код

$('a:not([target="_blank"]),a[href="#"]').click(function(e) {
href = this.href;
if(!href || href == '#'){
e.preventDefault();
return false;
}
else if((!e || (!e.ctrlKey && (!e.originalTarget || !e.originalTarget.keyCode))) &&
href.indexOf('#')<0 && href.indexOf('mailto:')<0 && href.indexOf('tel:')<0 && href.indexOf('callto:')<0 && href.indexOf('')<0){
e.preventDefault();
bodyUnload(function(){ window.location = href });
}

else return true;
});

Как сделать что бы при нажатии колесиком на ссылку она открывалась в новом окне?
Ответ: в функции клика отслеживай какая кнопка мыши нажата, но вообще это же по умолчанию и так работает, по крайней мере в хроме точно.
Вопрос: Скрол блоков

Столкнулся с проблемой размещения сразу 2-х скрол страниц (те блоков, просто чаще можно встретить ввиде длинного лендинга со скролом).

По задумке выглядит так: одна единственная страница (вся влазит в вюпорт), делится горизонтально пополам вверху 50% и снизу 50%. В такой изощренный метод выводится 100% (да я хотел сделать эффект буд-то страницы делятся на пополам).

Разделив ряд блоков на группу top (1-й скрол) и bottom (2-й), составляя 1-й блок top (50%) и 1-й блок bottom (50%) получаем (100%) полную страницу... Тогда они бы красиво одновременно начинали плавно сдвигаться (как на любом подобном сайте со скролом страниц) создавая нужную иллюзию.

Однако, 1-й скрол (top или 50% верха) воспринял блоки 2-го как продолжение... Покрутил, по разделял классы (селектора) вроде все стало на свои места. Но в итоге 1-й скрол начал работать как положено, а 2-й скрол (bottom или 50% низа) стал выводить только 1-й блок..

Разметил вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="top">
<div class="top-con">
1-1
</div>
<div class="top-con">
1-2
</div>
</div>
<div class="bottom">
<div class="bott-con">
2-1
</div>
<div class="bott-con">
2-2
</div>
</div>
Подскажите какую нибудь реализацию, может у кого завалялся свой велосипед... Я в принципе на гите по находил кучу, но там у всех них куча идентификаторов и классов (как минимум придется десяток своих переименовывать чтоб ничего не поплыло... Потому что когда я сам задавал их, для скрола часть все равно из jQueriui подхватывалась).

P.S
Заранее благодарю за уделенное внимание!
Ответ: Вынужден снова поднять вопрос (моя прошлая тема устарела).

Уже нашел в интернете (для ясности, чего я хочу добиться). Такой слайдер было предложено сделать при помощи fullpage но с ним так не выходит... Даже пытался его с передрать, но чего-то скрол не работает... Вообщем там сложная реализация, в моей первоначальной идее было составить два скролла страниц и для каждого из них задать свою группу блоков, чтоб они вместе формировали изображение и листались так же как там. Но без успешно... (+ да я не силен в js и видимо что-то упустил)

P.S
Подойдет любой рабочий велосипед т.е не обязательно с jQuery... (я просто не первый день ищу по интернету, и нашел всего 3-и похожих между собой решения)

Заранее благодарю!
Вопрос: Фиксация меню вверху и слева, чтобы при горизонтальном скроле оно не было прижато к окну

Фиксация к верху и леву меню, чтобы при горизонтальном скроле оно не было прижато к окну.
Меню зафиксировано на верху, в телефонах появляется горизонтальный скрол и меню пытается уместиться в эран хотя должно быть растянуто на ширину документа.
Как такое реазиловать? я кроме js не вижу вариантов.
п.с советы по адаптивности это оффтоп.
Ответ:
del

на ширине 320 без масштаба.
горизонтальный скрол есть, но меню все равно занимает максимум ширину экрана(не документа). Так вот интуитивно чтобы меню было прилеплено к верху экрана, но при скроле горизонтальном оно как бы оставалось приклеено в левому краю документа, чтобы можно было проскролить именно само меню и посмотреть все его пункты.
А просто position:fixed прилепляет по всем 2ум осям.
Вопрос: Перемещение нескольких объектов мышью

Всем привет. Столкнулся с такой проблемой. Создаю несколько объектов и нужно, что бы каждый объект можно было перетаскивать. Пока сделал только с одним объектом пробовал определить id при нажатии, но не взлетело. C js разбираться только начал. комментарии прилагаются
Вот код:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<style>
</style>
</head>
<body>
<div id="orange-circle" style="width: 100px; height: 100px; background: #cc0000; -moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px;"></div>
<div id="orange" style="width: 100px; height: 100px; background: #cc0000; -moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px;"></div>
<script>
var ball = document.getElementById("orange");
ball.onmousedown = function(e) { // 1. отследить нажатие
    ball.ondragstart = function() {
        return false;
    };
  // подготовить к перемещению
  // 2. разместить на том же месте, но в абсолютных координатах
  ball.style.position = 'absolute';
  moveAt(e);
  // переместим в body, чтобы мяч был точно не внутри position:relative
  document.body.appendChild(ball);
 
  ball.style.zIndex = 1000; // показывать мяч над другими элементами
 
  // передвинуть мяч под координаты курсора
  // и сдвинуть на половину ширины/высоты для центрирования
  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }
 
  // 3, перемещать по экрану
  document.onmousemove = function(e) {
    moveAt(e);
  }
 
  // 4. отследить окончание переноса
  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
}
</script>
</body>
</html>
Пробовал писать так:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style>
</style>
</head>
<body>
<div id="orange-circle" style="width: 100px; height: 100px; background: #cc0000; -moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px;" onclick="named(id)"></div>
<div id="orange" style="width: 100px; height: 100px; background: #cc0000; -moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px;" onclick="named(id)"></div>
<script>
function named(id){
var ball = document.getElementById("id");
   ball.onmousedown = function(e) {
   }
}
</script>
Ответ: Решено мб кому пригодится.
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style>
#square {
    width: 100px;
    height: 100px;
    background: black;
}
.circle {
    width: 100px; 
    height: 100px; 
    background: #cc0000; 
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px; 
    border-radius: 50px;
    cursor: pointer;
}
</style>
 
</head>
<body>
<div ondblclick="return false" onmousedown="return false">
<?
    for($i=0;$i<2;$i++){
    ?>
    <div id="square<?$i?>" class="square" onclick="named(id)"></div> <br>
    <?
    }
    ?>
    <script>
 
    function named(id){
        var ball = document.getElementById(id);
        ball.onmousedown = function(e) { // 1. отследить нажатие
            ball.ondragstart = function() {
                return false;
            };
            ball.onselectstart = function() {
                return false;
            };
            // подготовить к перемещению
            // 2. разместить на том же месте, но в абсолютных координатах
            ball.style.position = 'absolute';
            moveAt(e);
            // переместим в body, чтобы мяч был точно не внутри position:relative
            document.body.appendChild(ball);
 
            ball.style.zIndex = 1000; // показывать мяч над другими элементами
 
            // передвинуть мяч под координаты курсора
            // и сдвинуть на половину ширины/высоты для центрирования
            function moveAt(e) {
                ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
                ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
            }
            // 3, перемещать по экрану
            document.onmousemove = function(e) {
                moveAt(e);
            }
 
            // 4. отследить окончание переноса
            ball.onmouseup = function() {
                document.onmousemove = null;
                ball.onmouseup = null;
            }
        }
    }
    </script>
    </div>
    </body>
</html>