Jump to content
  • 0

Скролл. Проблема

slamer3000

Asked by slamer3000,

 Share

Question

slamer3000 Explorer

slamer3000

Posted
Posted

На html-странице есть общий скролл. Внутри страницы есть div со своим скроллом. Так вот при прокрутке колёсиком мышки внутри этого div'а после того, как ползунок достигает самого конца, начинает прокручиваться общий скролл всей страницы. Как от этого избавиться?

Link to comment
Share on other sites

26 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  slamer3000 said:
На html-странице есть общий скролл. Внутри страницы есть div со своим скроллом. Так вот при прокрутке колёсиком мышки внутри этого div'а после того, как ползунок достигает самого конца, начинает прокручиваться общий скролл всей страницы. Как от этого избавиться?

Перепешите код всех браузеров.

  Vlad said:
С помощью JavaScript только пожалуй.

Не поможет. На поведение UI JS не влияет.

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted
  s0rr0w said:
Не поможет. На поведение UI JS не влияет.

Не говори, если не знаешь. Можно избавиться средствами javascript. Для этого придётся переназначить обработчики скролла на странице и на диве на собственный.

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  ZoNT said:
Не говори, если не знаешь. Можно избавиться средствами javascript. Для этого придётся переназначить обработчики скролла на странице и на диве на собственный.

Во всех браузерах?

Link to comment
Share on other sites
  • 0
slamer3000 Explorer

slamer3000

Posted
  • Author
Posted

http://www.dyn-web.com/code/scroll/vert.php

Вот тут всё классно работает. Яваскриптовый скролл, но блин в Опере направление вращения колёсика мышки меняется на обратное. Реверт.

Именно в этом диве.

Да ещё и лицензию требуют гады на использование их скрипта (я б может его взял и пофиксил, да лицензия блин...)

Может ещё у кого-то есть примеры скриптов?

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  slamer3000 said:
http://www.dyn-web.com/code/scroll/vert.php

Вот тут всё классно работает. Яваскриптовый скролл, но блин в Опере направление вращения колёсика мышки меняется на обратное. Реверт.

Именно в этом диве.

Да ещё и лицензию требуют гады на использование их скрипта (я б может его взял и пофиксил, да лицензия блин...)

Может ещё у кого-то есть примеры скриптов?

Скажите, зачем вам именно такое поведение?

Если вы отключите скролл на всей старнице, то вы не сможете им прокрутить то, что останется за пределами

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted
  s0rr0w said:
Скажите, зачем вам именно такое поведение?

Если вы отключите скролл на всей старнице, то вы не сможете им прокрутить то, что останется за пределами

Можно отключить скролл только при нахождении на диве.

  s0rr0w said:
С удовольствием посмотрю на код.

Погугли :)

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  ZoNT said:
Я не учитель, чтобы учить человека с таким кол-вом постов разгребать мусор.

Тогда просто ответьте за свои слова.

  Quote
Для этого придётся переназначить обработчики скролла на странице и на диве на собственный.

Не я это написал.

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

Специально для мистера s0rr0w, который учил нас джаваскрипту в одной из тем, а также для всех тех, кто своей головой думать не умеет:

<html>
<body>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
df.jghd;lfhglsdjf glsdjf glsdj ljf ljgslf gdf gdf gdf gd<br>
	<div id="scr" style="width: 500px; height: 200px; border:1px solid red; overflow: auto;">
		1<br>
		2<br>
		3<br>
		4<br>
		5<br>
		6<br>
		7<br>
		8<br>
		9<br>
		1<br>
		2<br>
		3<br>
		4<br>
		5<br>
		6<br>
		7<br>
		8<br>
		9<br>
		1<br>
		2<br>
		3<br>
		4<br>
		5<br>
		6<br>
		7<br>
		8<br>
		9<br>
		1<br>
		2<br>
		3<br>
		4<br>
		5<br>
		6<br>
		7<br>
		8<br>
		9<br>
	</div>

<script type="text/javascript">
function PreventDefault(e) {
	e=e||window.event;
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
}

function wheel(e){
	e=e||window.event;
	var delta = 0;

	if (e.wheelDelta) delta = e.wheelDelta/8;
	else if (e.detail) delta = -e.detail*10;

	var div = e.target||e.srcElement;
	div.scrollTop = div.scrollTop - delta;

	PreventDefault(e);
}

var div = document.getElementById('scr');
if (div.addEventListener) div.addEventListener('DOMMouseScroll', wheel, false);
div.onmousewheel = wheel;
</script>

df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
df.jghd;lfh<br>
</body>
</html>

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  ZoNT said:
Технология стара как мир :)

В NN4.x ее не было. :)

А в DOM3 по этому поводу ни слуху ни духу.

А следить за развитием кастом-фич что-то не сильно охота. Интересно было первые пять лет.

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  ZoNT said:
А зачем следить, если можно погуглить, найти пример, посмотреть, подумать и сделать как надо...

А смысл просто так гуглить?

С точки зрения юзабилити менять дефолтное поведение каких-либо элементов без особой надобности - самое последнее дело, чем можно заниматься.

Подумать можно только о том, о чем знаешь. Если не знаешь - нужно гуглить. Погуглил сегодня, узнал.

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted
  s0rr0w said:
Подумать можно только о том, о чем знаешь.

Фигасе :)

Это ж как тогда мы находили решение задач по математике, которых не знали, решение головоломок, которых не знали? Не думая что-ли? Из астрала решение приходит???

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  ZoNT said:
Фигасе :)

Это ж как тогда мы находили решение задач по математике, которых не знали, решение головоломок, которых не знали? Не думая что-ли? Из астрала решение приходит???

Если вам не рассказали матчасть, то решить задачу вы не сможете. Потому что вы понятия не имеете, про что идет речь.

Попросите 3-х летнего ребенка написать вам письмо. Он не сможет выполнить эту задачу, так как он просто не знает ни алфавита, ни как этот алфавит записать.

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted
  s0rr0w said:
Если вам не рассказали матчасть, то решить задачу вы не сможете. Потому что вы понятия не имеете, про что идет речь.

Попросите 3-х летнего ребенка написать вам письмо. Он не сможет выполнить эту задачу, так как он просто не знает ни алфавита, ни как этот алфавит записать.

Фигасе :)

Так ты матчасть (основы javascript) не знаешь?!!!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept