Javascript-форум - Запретить/разрешить скроллинг

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Запретить/разрешить скроллинг (https://javascript.ru/forum/events/2085-zapretit-razreshit-skrolling.html)

Запретить/разрешить скроллинг

Я масштабирую картинки колесиком мыши и восстанавливаю исходный размер кликом мыши:

Код:

<img onClick="Resizef" onmousewheel="SmoothSize" id= "1">

При кручении колесика, помимо масштабирования, происходит скролл всего окна. Как его запретить, пока мышь над рисуноком, и разрешить, когда вне?

onmousewheel="SmoothSize; return false;" а так пробовали?

Сейчас попробовал, не помогло

Все заработало, спасибо. Видимо, в предыдущий раз скопировал с экрана, там лишняя точка с запятой:

Код:

onmousewheel="SmoothSize; return false;"

Без нее все ОК:

Код:

onmousewheel="SmoothSize; return false"

А почему обработчик срабатывает без вызова? Я думал надо так:

<img onClick="Resizef()" onmousewheel="SmoothSize(); return false" id= "1">

Сейчас выглядит так:

Код:

<body onLoad = "GetInitSize()">

//тут еще кое-что...

<img src="Wiring/Вентилятор СО.png" border="1" alt="Схема 1" id="pic1" onClick="Resize(this)" onmousewheel="SmoothSize(this); return false">

JS выглядит так:

Код:

var InitHeight = new Array();

var InitWidth = new Array();



function GetInitSize()

{var NewImage =  new Image();

var allpic = document.getElementsByTagName("img");

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

{NewImage.src = allpic[i].src; 

InitHeight[allpic[i].id] = NewImage.height;

InitWidth[allpic[i].id] = NewImage.width;}

}



function Resize(obj)

{obj.width = InitWidth[obj.id];

 obj.height = InitHeight[obj.id];

}



function SmoothSize(obj)

{var WidthDelta;

var HeightDelta;

WidthDelta = event.wheelDelta;

HeightDelta = Math.round(event.wheelDelta*InitHeight[obj.id]/InitWidth[obj.id]);

if ((obj.offsetWidth + WidthDelta) > 5)

  {if ((obj.offsetHeight + HeightDelta) > 5)

    {obj.height += HeightDelta;

         obj.width += WidthDelta;};

  }

}

Колесиком картинка масштабируется, кликом размер восстанавливается до исходного.
Единственно, при уменьшении картинки минимальный размер почему-то другой (точнее пропорции), чем после первого же клика.
Хорошо бы еще, чтобы позиция мышки на рисунке не смещалась при изменении масштаба. А также чтобы была возможность выделения области рисунка для его масштабирования.
Задача - максимально удобный просмотр эл. схем автомобиля.
Толкните в нужном направлении.

Добился того, чтобы позиция мышки на рисунке не смещалась при изменении масштаба. Для этого двигаю скроллинг окна:

Код:

function SmoothSize(obj)

{var WidthDelta;//Img width change on onmousewheel

var HeightDelta;

var NewWidth;

var NewHeight;

var WidthScroll;//Cursor pos change compensation on scaling

var HeightScroll;

WidthDelta = event.wheelDelta;

NewWidth = obj.offsetWidth + WidthDelta;

NewHeight = Math.round(NewWidth*InitHeight[obj.id]/InitWidth[obj.id]);//taking into account img proportion

HeightDelta = NewHeight - obj.offsetHeight;

if ((NewWidth > 5)&&(NewHeight > 5))

   {obj.width = NewWidth;

     obj.height = NewHeight;

     WidthScroll = Math.round(event.offsetX*WidthDelta/NewWidth);  

     HeightScroll = Math.round(event.offsetY*HeightDelta/NewHeight); 

     window.scrollBy(WidthScroll, HeightScroll);

    }        

}

Минимальная величина картинки - 5 пикселей. Пропорции соблюдаются отлично по сравнению с прежним вариантом.
Получается сперва увеличение/уменьшение картинки (изменение obj.height и obj.width), затем смещение окна на нужную величину (window.scrollBy). Конечно, пока картинки меняют масштаб и смещаются, идет мусор на экране. Как избавиться от мусора, подскажите пожалуйста.

Все хорошо, только этот метод не работает в Firefox, может кто нибудь подскажет кроссбраузерный вариант, пожалуйста

shilinpavel,
я уже писал о подобном в этой теме: http://javascript.ru/forum/misc/2942...acii-okna.html