1

Здравствуйте, читал кучу мануалов везде скролл к объекту, а мне бы просто скролл дива по оси_у скажем на 190px вниз\вверх, как реализовать?

Если несложно посмотрите пример: http://jsfiddle.net/JBAjc/4/

И несколько субвопросов:

  • у поля content сделать бы overflow: auto; (вдруг скриптов нет), а далее скриптами включать overflow: hidden;
  • скролилось бы ещё колёсиком, с тем же шагом (190px)

Спасибо за внимание, уверен этот пример ещё кому нибудь сгодится как справка.

2 ответа 2

3

Как бы на форуме не принято выполнять работу за кого-то, но т.к. тут ничего особо сложного и нет, то набросал вам примерчик, а оптимизацию оставлю вам.

var scrollBlock = $('.content'),
    dir = 0,
    cPos = 0,
    content = document.getElementById('content');
if (content.addEventListener) {
	content.addEventListener("mousewheel", getDelta, false);
	content.addEventListener("DOMMouseScroll", getDelta, false);
} else {
    content.attachEvent("onmousewheel", getDelta);
}

function getDelta(e) {
	var e = window.event || e;
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    startScroll(delta);
	return false;
}

function startScroll(obj){
    cPos = scrollBlock.scrollTop();
    if(obj.type == 'click'){
        obj.originalEvent.preventDefault();
        dir = ($(this).index('.bar') ? cPos + 130 : cPos - 130);
    } else {
        dir = (obj < 0 ? cPos + 130 : cPos - 130);
    }
    scrollBlock.animate({
        scrollTop: dir
    });
}
$('.bar').on('click',startScroll);
* {
    padding: 0px;
    margin: 0px;
    border: none;
}

body {
    margin: 10px;
}
img {
    display: block;
    border: none;
    padding: 5px;
}

.bar {
    width: 190px;
    height: 30px;
    background: #ccc;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.bar:hover {
    background: #aaa;
}

.content {
    width: 190px;
    height: 390px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="bar">НАВЕРХ</div>
<div class="content" id="content">
    <img src="http://lorempixel.com/180/120/sports/1" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/2" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/3" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/4" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/5" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/6" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/7" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/8" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/9" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/10" alt="peview"/>
    <img src="http://lorempixel.com/180/120/sports/11" alt="peview"/>
</div>
<div class="bar">ВНИЗ</div>

1
  • Код лучше добавлять в ответ, вдруг сторонний сайт закроют? 29 сен 2016 в 12:12
0

Вот так можно:

<div style="overflow-y: scroll; height: 190px;">
   ... ... ...
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.