Прокрутка пользовательских блоков с помощью кнопок

Question

Прокрутка пользовательских блоков с помощью кнопок

В оболочке вы можете проанализировать HTML , используя:

sed , хотя: Turing.sed Write HTML-парсер (домашнее задание) ??? Прибыль!
hxselect из html-xml-utils package
vim / ex (который может легко перепрыгнуть между html-тегами ), например: удаление метки стиля с помощью внутреннего кода:
```
$ curl -s http://example.com/ | ex -s +'/
```

  grep, например: извлечение внешнего html файла H1: $ curl -s http://example.com/ | grep -o '.*'
Example Domain
 извлечение тела: $ curl -s http://example.com/ | tr '\n' ' ' | grep -o '.*'
  Example Domain ...
 
   html2text для простого синтаксического анализа текста: например,  таблицы синтаксического анализа : $ html2text foo.txt | column -ts'|'
 
  с использованием xpath (XML::XPath perl-модуля), см. здесь пример    
  perl или Python (см.  пример @Gilles ) 
  для разбора нескольких файлов одновременно, см.  Как разбирать сотню  html файлы исходного кода в оболочке?

Связанный (почему вы не должны использовать регулярное выражение):

Если вам нравятся регулярные выражения Так много, почему вы не женитесь на них?

   Регулярные выражения: теперь у вас есть две проблемы  
   Взлом HTML sanitizer stackoverflow.com HTML / / g11


         
            -1

         
         
            javascript html css         
         
         
            задан Meil Helt            17 January 2019 в 15:47 
         
         
         поделиться


  

      
    

    
   
   
      4 ответа
      

      
         
                     
      

         
         
            
               
                  
                      Вы можете использовать:   Element.scrollIntoView()  . 
  Пример: 
 Element.scrollIntoView({
  behavior: "smooth",
  block: "center",
  inline: "center"
});
  Я сделал демо. 
  
  (function() {
  var btnFirstSection = document.getElementById("btnFirstSection"),
    btnSecondSection = document.getElementById("btnSecondSection");

  btnFirstSection.onclick = btnSecondSection.onclick = function() {
    var target = this.dataset.target;
    document.getElementById(target).scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "center"
    });
  };
}());
 .buttons,
#scrollDiv,
#scrollDiv p {
  margin: 5px;
  padding: 5px;
}

.buttons {
  background-color: #b2bbc8;
}

.buttons button {
  cursor: pointer;
}

#scrollDiv {
  height: 200px;
  overflow: auto;
}

#scrollDiv,
#scrollDiv p {
  border: #b2bbc8 solid 1px;
}
 <div class="buttons">
  <button id="btnFirstSection" data-target="first" type="button">First Section</button>
  <button id="btnSecondSection" data-target="second" type="button">Second Section</button>
</div>
<div id="scrollDiv">
  <div id="first">
    <h1>First Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div id="second">
    <h1>Second Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
 
 
 
  Важно учитывать совместимость браузера     . 
                  
                  
                     
                     0

                  
                  
                  
                     ответ дан Danny Fardy Jhonston Bermúdez                     17 January 2019 в 15:47 
                  
                  поделиться
               
                              
                  
                     
      
                                         
                  
               
            
         
         
            
         
            
               
                  
                      Убедитесь, что элементы прокручиваются, а ваша функция прокручивает всю страницу, потому что вы используете window.scroll () вместо yourDiv.scroll () 
                  
                  
                     
                     0

                  
                  
                  
                     ответ дан Trevor Blythe                     17 January 2019 в 15:47 
                  
                  поделиться
               
                              
                  
                     
      
                                         
                  
               
            
         
         
            
         
            
               
                  
                      Это то, что вы ищете 
  
  <html>

<style>
.scroll{
	width:300px;
	height:200px;
	background:red;
	overflow: scroll;
}
</style>

<div class="scroll">
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
</div>
</html>
 
 
 
                  
                  
                     
                     0

                  
                  
                  
                     ответ дан jayangaVliyanage                     17 January 2019 в 15:47 
                  
                  поделиться
               
                              
                  
                     
      
                                         
                  
               
            
         
         
            
         
            
               
                  
                      
  body{
    background-color:#8cbfcf;
    margin: 0px 0px 0px 0px;
    overflow:hidden;
    }
#header{
    height: 60px;
    background-color:#70b0c3;
    position:fixed;
    box-shadow:#19343d 0px 1px 2px;
    width:100%;
    margin-left:0px;
    z-index:999;
    }
#accountinfo{
    position: absolute;
    right:10px;
    top: 0px;
    font-family: Happy Monkey, sans-serif;
    color:#EFF;
    text-shadow:#000 1px 1px 1px;
    font-size:18px;
    line-height: 60px;
    }
#blank{
     height:60px;
     width:100%;
    }
#main{
    height: 1500px;
    width:580px;
    margin-left:auto;
    margin-top:20px;
    background-color:#70b0c3;
    box-shadow: #254C58 1px 0px;
    border: #3C7D91 1px double;
    border-bottom:0px;
    opacity:0.9;
    padding:10px 10px 10px 10px;
    overflow-y: scroll;
    max-height: 400px;
    }
#leftside{
    top: 80px;
    left: 160px;
    float: left;
    height: auto;
    width: 230px;
    background-color: #70B0C3;
    opacity: 0.9;
    border: #3C7D91 1px double;
    position:fixed;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }
#rightside{
    position:fixed;
    top:80px;
    right:160px;
    height:300px;
    width:230px;
    opacity: 0.9;
    background-color: #70B0C3;
    border: #3C7D91 1px double;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }
 <body>
<div id="header">
    <div id="title">Your Feedback</div>
</div>
<div id="blank"></div>
<div id="main" style="margin-right: auto; ">
    <h1>TITLE</h1>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
</div>
        
<div id="footer">
    BLABLA
</div>
 
 
 
  Это то, что вы ищете? 
  см. -  Полоса прокрутки в одном div только  
                  
                  
                     
                     0

                  
                  
                  
                     ответ дан Basha                     17 January 2019 в 15:47 
                  
                  поделиться
               
                              
                  
                     
      
                                         
                  
               
            
         
         
               
          Другие вопросы по тегам:          
         javascript html css       
        Похожие вопросы:

        
          
                          99 
 Скрытые функции JavaScript? [закрытый] - 23 May 2017 02:10 
                            70 
 Что такое JavaScript-версия sleep ()? - 17 March 2018 18:15 
                            61 
 Как я могу отформатировать числа в виде строки валюты в JavaScript? - 26 May 2019 04:14 
                            55 
 Почему бы не использовать таблицы для разметки в HTML? [закрыто] - 6 November 2018 00:07 
                            44 
 Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто] - 26 December 2018 06:38 
                            40 
 Как лучше всего обнаружить мобильное устройство? - 24 April 2019 12:27

score 0 · Answer 1

Вы можете использовать: Element.scrollIntoView() .

Пример:

Element.scrollIntoView({
  behavior: "smooth",
  block: "center",
  inline: "center"
});

Я сделал демо.

(function() {
  var btnFirstSection = document.getElementById("btnFirstSection"),
    btnSecondSection = document.getElementById("btnSecondSection");

  btnFirstSection.onclick = btnSecondSection.onclick = function() {
    var target = this.dataset.target;
    document.getElementById(target).scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "center"
    });
  };
}());

.buttons,
#scrollDiv,
#scrollDiv p {
  margin: 5px;
  padding: 5px;
}

.buttons {
  background-color: #b2bbc8;
}

.buttons button {
  cursor: pointer;
}

#scrollDiv {
  height: 200px;
  overflow: auto;
}

#scrollDiv,
#scrollDiv p {
  border: #b2bbc8 solid 1px;
}

<div class="buttons">
  <button id="btnFirstSection" data-target="first" type="button">First Section</button>
  <button id="btnSecondSection" data-target="second" type="button">Second Section</button>
</div>
<div id="scrollDiv">
  <div id="first">
    <h1>First Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div id="second">
    <h1>Second Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Важно учитывать совместимость браузера .

score 0 · Answer 2

Убедитесь, что элементы прокручиваются, а ваша функция прокручивает всю страницу, потому что вы используете window.scroll () вместо yourDiv.scroll ()

score 0 · Answer 3

Это то, что вы ищете

<html>

<style>
.scroll{
	width:300px;
	height:200px;
	background:red;
	overflow: scroll;
}
</style>

<div class="scroll">
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
</div>
</html>

score 0 · Answer 4

body{
    background-color:#8cbfcf;
    margin: 0px 0px 0px 0px;
    overflow:hidden;
    }
#header{
    height: 60px;
    background-color:#70b0c3;
    position:fixed;
    box-shadow:#19343d 0px 1px 2px;
    width:100%;
    margin-left:0px;
    z-index:999;
    }
#accountinfo{
    position: absolute;
    right:10px;
    top: 0px;
    font-family: Happy Monkey, sans-serif;
    color:#EFF;
    text-shadow:#000 1px 1px 1px;
    font-size:18px;
    line-height: 60px;
    }
#blank{
     height:60px;
     width:100%;
    }
#main{
    height: 1500px;
    width:580px;
    margin-left:auto;
    margin-top:20px;
    background-color:#70b0c3;
    box-shadow: #254C58 1px 0px;
    border: #3C7D91 1px double;
    border-bottom:0px;
    opacity:0.9;
    padding:10px 10px 10px 10px;
    overflow-y: scroll;
    max-height: 400px;
    }
#leftside{
    top: 80px;
    left: 160px;
    float: left;
    height: auto;
    width: 230px;
    background-color: #70B0C3;
    opacity: 0.9;
    border: #3C7D91 1px double;
    position:fixed;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }
#rightside{
    position:fixed;
    top:80px;
    right:160px;
    height:300px;
    width:230px;
    opacity: 0.9;
    background-color: #70B0C3;
    border: #3C7D91 1px double;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }

<body>
<div id="header">
    <div id="title">Your Feedback</div>
</div>
<div id="blank"></div>
<div id="main" style="margin-right: auto; ">
    <h1>TITLE</h1>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
</div>
        
<div id="footer">
    BLABLA
</div>

Это то, что вы ищете?

см. - Полоса прокрутки в одном div только