Vertical scroll by clicking on the background

Question

Vertical scroll by clicking on the background

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Is there any way by means of jQuery or CSS to perform the vertical scroll by clicking on the body of the page?

I have made and modified the scroll of the project but I have no idea how to capture the event of clicking on the body and move the scroll.

My code:

.layerManagementVarious::-webkit-scrollbar {
  height: 10px;
  background: <?php echo $color3 ?>;
}

.layerManagementVarious::-webkit-scrollbar-thumb {
  background: #eee;
}

.layerManagementVarious {
  display: none;
  overflow-x: scroll;
  display: inline-block;
  height: 72vh;
  margin-top: 28px;
  width: 72%;
  padding-left: 0px;
  margin-left: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="layerManagementVarious col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-8">
  <!--<div id="layerTask">-->
  <div class='first'>
    <div class="containerColumn">
      <div class="titleContainer">
        <div class="list-img">
          <div class="img-wrapper">
            <div class="vertical_center t-a-center"><img src="../uploads/users/foto.jpg"></div>
          </div>
        </div>
        <div class="list-middle">
          <span class="list-name"></span>
          <span class="list-description"></span>
        </div>
      </div>
      <div class="taskContainer">
        <div class="taskRecipient" data-id="1">
          <div class="miniTaskImageRecipient">
            <div class="miniTaskImage"></div>
          </div>
          <div class="miniTaskTitle">TITULO TITULO </div>
        </div>
      </div>
    </div>
  </div>
  <div class='first'>
    <div class="containerColumn">
      <div class="titleContainer">
        <div class="list-img">
          <div class="img-wrapper">
            <div class="vertical_center t-a-center"><img src="../uploads/users/oto.jpg"></div>
          </div>
        </div>
        <div class="list-middle">
          <span class="list-name"></span>
          <span class="list-description"></span>
        </div>
      </div>
      <div class="taskContainer">
        <div class="taskRecipient" data-id="1">
          <div class="miniTaskImageRecipient">
            <div class="miniTaskImage"></div>
          </div>
          <div class="miniTaskTitle">TITULO TITULO </div>
        </div>
      </div>
    </div>
  </div>

  <div class='first'>
    <div class="containerColumn">
      <div class="titleContainer">
        <div class="list-img">
          <div class="img-wrapper">
            <div class="vertical_center t-a-center"><img src="../uploads/users/foto.jpg"></div>
          </div>
        </div>
        <div class="list-middle">
          <span class="list-name"></span>
          <span class="list-description"></span>
        </div>
      </div>
      <div class="taskContainer">
        <div class="taskRecipient" data-id="1">
          <div class="miniTaskImageRecipient">
            <div class="miniTaskImage"></div>
          </div>
          <div class="miniTaskTitle">TITULO TITULO </div>
        </div>
      </div>
    </div>
  </div>

  <div class='first'>
    <div class="containerColumn">
      <div class="titleContainer">
        <div class="list-img">
          <div class="img-wrapper">
            <div class="vertical_center t-a-center"><img src="../uploads/users/foto.jpg"></div>
          </div>
        </div>
        <div class="list-middle">
          <span class="list-name"></span>
          <span class="list-description"></span>
        </div>
      </div>
      <div class="taskContainer">
        <div class="taskRecipient" data-id="1">
          <div class="miniTaskImageRecipient">
            <div class="miniTaskImage"></div>
          </div>
          <div class="miniTaskTitle">TITULO TITULO </div>
        </div>
      </div>
    </div>
  </div>
  <div class='first'>
    <div class="containerColumn">
      <div class="titleContainer">
        <div class="list-img">
          <div class="img-wrapper">
            <div class="vertical_center t-a-center"><img src="../uploads/users/foto.jpg"></div>
          </div>
        </div>
        <div class="list-middle">
          <span class="list-name"></span>
          <span class="list-description"></span>
        </div>
      </div>
      <div class="taskContainer">
        <div class="taskRecipient" data-id="1">
          <div class="miniTaskImageRecipient">
            <div class="miniTaskImage"></div>
          </div>
          <div class="miniTaskTitle">TITULO TITULO </div>
        </div>
      </div>
    </div>
  </div>
  <!--</div>-->
</div>

javascript jquery css3 css

asked by Korzan 08.02.2018 в 18:49

source

2 answers

0

Hello, you can try the following code and now you change the variables that adapt to your code

var prev = 0;
var $window = $(window);
var nav = $('.nav');

$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});

answered by 08.02.2018 в 19:18

rotate an image 90 degrees How can I see the results in pesos ($ 0.00)?

score 1 · Accepted Answer

Thanks to a great partner I have found the answer:

can be done with jquery:

    $('.layerManagementVarious').on('mousedown', function(e){ 

        var initialMousePosX = e.pageX;
        var initial_scroll=$('.layerManagementVarious').scrollLeft();
        var currentMousePosX=0;

        $(document).on('mousemove', function(ev){

            currentMousePosX = ev.pageX - initialMousePosX ;
            $('.layerManagementVarious').scrollLeft(initial_scroll+currentMousePosX);
        });

        $(document).on('mouseup', function(ev){
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');

        });

    });