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
  • Код лучше добавлять в ответ, вдруг сторонний сайт закроют? Commented 29 сент. 2016 в 12:12
0

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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